الخاصية align-content

الخاصية align-content في CSS تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.

/* المحاذاة المكانية */
align-content: center;
align-content: start;
align-content: end;
align-content: flex-start;
align-content: flex-end;
align-content: left;
align-content: right;

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

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

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

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

ليس لهذه الخاصية أيّ أثر على حاويات flex التي تكون العناصر فيها معروضةً في سطرٍ وحيد.

القيمة الابتدائية	stretch
تُطبَّق على	حاويات flex التي تُعرَض فيها العناصر على أكثر من سطر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

مثال عن استخدام جميع القيم المدعومة في أغلبية المتصفحات حاليًا، لاحظ طريقة توزيع العناصر والمسافات الفارغة المتروكة حولها عند استخدام مختلف القيم:

<code>align-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>align-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>align-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>align-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>align-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>align-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>

شيفرة CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  height:200px;
  width: 240px;
  background-color: #8c8c8c;
}

.flex-start { align-content: flex-start; }
.flex-end { align-content: flex-end; }
.center { align-content: center; }
.space-between { align-content: space-between; }
.space-around { align-content: space-around; }
.stretch { align-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;
}

دعم المتصفحات

الميزة	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 لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

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

القيمة flex-start

ستتم محاذاة العناصر بجوار بعضها بدءًا من بداية المحور الثانوي لحاوية flex (أي من أعلى العنصر في أغلبية الحالات).

القيمة flex-end

ستتم محاذاة العناصر بجوار بعضها بدءًا من نهاية المحور الثانوي لحاوية flex (أي من أسفل العنصر في أغلبية الحالات).

القيمة center

ستتم محاذاة العناصر بجوار بعضها بدءًا من وسط المحور الثانوي لحاوية flex.

القيمة space-between

ستوزَّع العناصر على المحور الثانوي لحاوية flex، وستكون المسافة الفاصلة بين كل عنصرين متتاليين ثابتةً، وسيكون أوّل عنصر محاذيًا لحافة البداية، وسيكون آخر عنصر محاذيًا لحافة النهاية.

القيمة space-around

ستوزَّع العناصر على المحور الثانوي لحاوية flex، وستكون المسافة الفاصلة بين كل عنصرين متتاليين ثابتةً، والمسافة الفارغة التي تسبق أوّل عنصر والتي تلي آخر عنصر ستساوي نصف المسافة بين عنصرين متتاليين.

القيمة stretch

إذا كانت أبعاد العناصر الموجودة داخل الحاوية على المحور الثانوي أقل من أبعاد الحاوية، فستزيد أبعاد العناصر زيادةً متساويةً لكن مع احترام القيود المفروضة عبر خاصيات max-height أو max-width (أو ما شابه ذلك)، وبالتالي ستكون أبعاد العناصر الموجودة داخل الحاوية تساوي بُعد الحاوية على المحور الثانوي.

البنية الرسمية

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

مصادر ومواصفات

• مسودة CSS Box Alignment Module Level 3، أضافت هذه المسودة القيم baseline و first baseline و last baseline و self-start و self-end و start و end و left و right و unsafe و safe؛ لكن دعم هذه القيم ما يزال ضعيفًا.
• مواصفة CSS Flexible Box Layout Module.