CSS/align-items

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

بطاقة الخاصية

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

/* الكلمات المحجوزة الأساسية */ 
align-items: normal; 
align-items: stretch; 

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

/* محاذاة خط الأساس */ 
align-items: baseline; 
align-items: first baseline; 
align-items: last baseline;
align-items: safe center; 
align-items: unsafe center; 

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

الفرق بين هذه الخاصية والخاصية align-content هو أنَّه هذه الخاصية تُحدِّد محاذاة العناصر اعتمادًا على خط المحاذاة، بينما الخاصية align-content تُحدِّد محاذاة الخطوط نفسها.

قد يصعب فهم الشرح السابق دون توفير مثال، لذا سنقارن في المثال الحي الآتي بين الخاصيتين:

align-content: center;

1

2

3

4

5

6

align-items: center;

1

2

3

4

5

6

أمثلة

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

<code>align-items: 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-items: 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-items: 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-items: 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-items: flex-start; }
.flex-end { align-items: flex-end; }
.center { align-items: center; }
.stretch { align-items: stretch; }

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  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
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-items القيم التالية، لاحظ أنَّنا لم نشرح القيم غير المدعومة إلا في قلّة من المتصفحات لعدم جدوى ذلك.

flex-start

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

flex-end

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

center

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

stretch

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

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

align-items: flex-start | flex-end | center | 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.