عرض مصدر CSS/justify-content

<noinclude>{{DISPLAYTITLE:الخاصية <code>justify-content</code>}}</noinclude>
الخاصية <code>justify-content</code> في CSS تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex.<syntaxhighlight lang="css">
/* المحاذاة المكانية */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* محاذاة خط الأساس */ 
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* توزيع المسافات */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* التحكم بالفائض من المحتوى */
justify-content: safe center;
justify-content: unsafe center;

/* القيم العامة */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>flex-start</code>

|-
! scope="row" |تُطبَّق على
|حاويات flex.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

== أمثلة ==
مثال عن استخدام جميع القيم المدعومة في أغلبية المتصفحات حاليًا، لاحظ طريقة توزيع العناصر والمسافات الفارغة المتروكة حولها عند استخدام مختلف القيم: <syntaxhighlight lang="html">
<code>justify-content: flex-start;</code>
<div class="container flex-start">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>
<br>
<code>justify-content: flex-end;</code>
<div class="container flex-end">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>
<br>
<code>justify-content: center;</code>
<div class="container center">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>
<br>
<code>justify-content: space-between;</code>
<div class="container space-between">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>
<br>
<code>justify-content: space-around;</code>
<div class="container space-around">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>
<br>
<code>justify-content: stretch;</code>
<div class="container stretch">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>
</syntaxhighlight>شيفرة CSS: <syntaxhighlight lang="css">
.container {
  display: flex;
  flex-wrap: wrap;
  height:200px;
  width: 240px;
  background-color: #8c8c8c;
}

.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.center { justify-content: center; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.stretch { justify-content: stretch; }

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|29.0
|20.0
|11
|12.5
|9.0
|-
!space-evenly
|غير مدعومة
|52.0
|غير مدعومة
|غير مدعومة
|غير مدعومة
|-
!start و end
|غير مدعومة
|مدعومة
|غير مدعومة
|غير مدعومة
|؟
|-
!left و right
|غير مدعومة
|52.0
|غير مدعومة
|غير مدعومة
|؟
|-
!baseline
|57.0
|مدعومة
|غير مدعومة
|44.0
|؟
|-
!first baseline و last baseline
|غير مدعومة
|52.0
|غير مدعومة
|غير مدعومة
|؟
|-
!stretch
|57.0
|52.0
|غير مدعومة
|44.0
|؟
|}
الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (<code>-webkit-</code> أو <code>-ms-</code>).

== البنية العامة ==
تقبل الخاصية <code>justify-content</code> القيم التالية، لاحظ أنَّنا لم نشرح القيم غير المدعومة إلا في قلّة من المتصفحات لعدم جدوى ذلك.

=== القيمة <code>flex-start</code> ===
ستتم محاذاة العناصر بجوار بعضها بدءًا من بداية المحور الرئيسي لحاوية flex (أي من أعلى العنصر في أغلبية الحالات).

=== القيمة <code>flex-end</code> ===
ستتم محاذاة العناصر بجوار بعضها بدءًا من نهاية المحور الرئيسي لحاوية flex (أي من أسفل العنصر في أغلبية الحالات).

=== القيمة <code>center</code> ===
ستتم محاذاة العناصر بجوار بعضها بدءًا من وسط المحور الرئيسي لحاوية flex.

=== القيمة <code>space-between</code> ===
ستوزَّع العناصر على المحور الرئيسي لحاوية flex، وستكون المسافة الفاصلة بين كل عنصرين متتاليين ثابتةً، وسيكون أوّل عنصر محاذيًا لحافة البداية، وسيكون آخر عنصر محاذيًا لحافة النهاية.

=== القيمة <code>space-around</code> ===
ستوزَّع العناصر على المحور الرئيسي لحاوية flex، وستكون المسافة الفاصلة بين كل عنصرين متتاليين ثابتةً، والمسافة الفارغة التي تسبق أوّل عنصر والتي تلي آخر عنصر ستساوي نصف المسافة بين عنصرين متتاليين.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
justify-content: flex-start | flex-end | center | space-between | space-around;

</syntaxhighlight>

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-align-3/#propdef-justify-content CSS Box Alignment Module Level 3]، أضافت هذه المسودة القيم <code>baseline</code> و <code>first baseline</code> و <code>last baseline</code> و <code>self-start</code> و <code>self-end</code> و <code>start</code> و <code>end</code> و <code>left</code> و <code>right</code> و <code>unsafe</code> و <code>safe</code>؛ لكن دعم هذه القيم ما يزال ضعيفًا.
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#propdef-justify-content CSS Flexible Box Layout Module]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Flexbox|{{SUBPAGENAME}}]]