خاصية 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%;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS flex Justify Content CSS