CSS

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

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

التاريخ

04 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1191

المواضيع

24
الشروحات chevron_left CSS flex Justify Content chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.

justify-content:value;
CSS justify-content values

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

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.

.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.

.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.

.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.

.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.

.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.

.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.