الخاصية align-content

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية 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.