الخاصية align-items

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية align-items في CSS تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية justify-content لكن في الاتجاه المعامد.
/* الكلمات المحجوزة الأساسية */ 
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
القيمة الابتدائية stretch
تُطبَّق على حاويات flex.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.

أمثلة

مثال عن استخدام جميع القيم المدعومة في أغلبية المتصفحات حاليًا، لاحظ طريقة توزيع العناصر والمسافات الفارغة المتروكة حولها عند استخدام مختلف القيم:
<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.