انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 75
دورة لغة CSS

خاصية في justify-content مع flex box لغة CSSCSS flex Justify Content

سوف تتعلم في هذا الدرس خاصية  justify-content في لغة CSS ووظيفيتها وكيفية إستخدامها مع حاويات flex box وجميع القيم الخاصة بها.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,410
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

CSS flex justify content خاصية في justify-content مع flex box لغة CSS

خاصية justify-content تستخدم للتحكم في توسيط أو محاذاة flex items العناصر الداخلية لحاوية flex box أفقي عندما تكون العناصر لا تستخدم عرض الحاوية بالكامل في لغة CSS.


قيم خاصية justify-content في لغة CSS:

  • flex-start هي القيمة الأفتراضية وهي عرض العناصر في بداية الحاوية من جهة اليسار إذا كانت الحاوية غير عكسية.
  • flex-end عرض العناصر في نهاية الحاوية من جهة اليمين إذا كانت الحاوية غير عكسية.
  • center عرض العناصر في في منتصف الحاوية سواء كانت الحاوية عكسية أو غير عكسية.
  • space-between يتم توزيع المساحة المتبيقية بين العناصر بالتساوي وأول عنصر لا يوجد قبله مساحة وأخر عنصر لا يوجد بعدة مساحة.
  • space-around يتم توزيع المساحة المتبيقية بين العناصر وأول عنصر يوجد قبله مساحة وأخر عنصر يوجد بعدة مساحة.
  • space-evenly تكون المساحات بين العناصر متساوية.

CSS justify-content syntax

طريقة كتابة خاصية justify-content في لغة CSS.

HTML 
justify-content:value;

CSS justify-content values

قيم خاصية justify-content في لغة CSS.

HTML 
justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

CSS flex justify content flex start خاصية justify-content مع القيمة flex-start في لغة CSS

تستخدم خاصية justify-content مع القيمة flex-start في لغة CSS لعرض العناصر الداخلية لحاوية flex box في البداية من اليسار إلي اليمين إذا كانت الحاوية غير عكسية.

جرّب بنفسك

CSS flex justify content flex start

خاصية justify-content مع القيمة flex-start في لغة CSS.

HTML 
.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

CSS flex justify content flex end خاصية justify-content مع القيمة flex-end في لغة CSS

تسخدم خاصية justify-content مع القيمة flex-end في لغة CSS لعرض العناصر الداخلية لحاوية flex box في نهاية الحاوية من اليمين إلي اليسار إذا كانت الحاوية غير عكسية.

جرّب بنفسك

CSS flex justify content flex end

خاصية justify-content مع القيمة flex-end في لغة CSS.

HTML 
.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:flex-end;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

CSS flex justify content center خاصية justify-content مع القيمة center في لغة CSS

تسخدم خاصية justify-content مع القيمة center في لغة CSS لعرض العناصر الداخلية لحاوية flex box في منتصف سواء كانت الحاوية غير عكسية أو عكسية.

جرّب بنفسك

CSS flex justify content center

خاصية justify-content مع القيمة center في لغة CSS.

HTML 
.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:center;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

CSS flex justify space between خاصية justify-content مع القيمة space-between في لغة CSS

تسخدم خاصية justify-content مع القيمة space-between في لغة CSS لعرض العناصر الداخلية لحاوية flex box بينهم مسافات فارغة متساوية عدا أول لا يوجد قبله مساحه وأخر عنصر لا يوجد بعدة مساحة.

جرّب بنفسك

CSS flex justify space between

خاصية justify-content مع القيمة space-between في لغة CSS.

HTML 
.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

CSS flex justify space around خاصية justify-content مع القيمة space-around في لغة CSS

تسخدم خاصية justify-content مع القيمة space-around في لغة CSS لعرض العناصر الداخلية لحاوية flex box قبلها وبعدها مساحات فارغة غير متساوية.

جرّب بنفسك

CSS flex justify space around

خاصية justify-content مع القيمة space-around في لغة CSS.

HTML 
.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:space-around;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

CSS flex justify space evenly خاصية justify-content مع القيمة space-evenly في لغة CSS

تسخدم خاصية justify-content مع القيمة space-evenly في لغة CSS لعرض العناصر الداخلية لحاوية flex box قبلها وبعدها مساحات فارغة متساوية.

جرّب بنفسك

CSS flex justify space evenly

خاصية justify-content مع القيمة space-around في لغة CSS.

HTML 
.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…