الخاصية `align-self`

الخاصية align-self في CSS تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى auto فسيتم تجاهل الخاصية align-self.

لا يمكن تطبيق هذه الخاصية على العناصر الكتلية (block-level boxes) أو خلايا الجداول.

/* الكلمات المحجوزة */ 
align-self: auto; 
align-self: normal; 

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

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

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

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

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

أمثلة

لاحظ كيف حددنا موضع آخر عنصر <div> باستخدام الخاصية align-self في المثال الآتي:

<div>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</div>

شيفرة CSS:

div {
  display: flex;
  align-items: center;
  height: 120px;
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
}

div > div {
  height: 60px;
  background-color: skyblue;
  margin: 5px;
  padding: 0.25em;
}

div:nth-child(3) {
  align-self: flex-end;
  background-color: salmon;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	29.0	20.0	11	12.5	غير مدعومة
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-self القيم التالية، لاحظ أنَّنا لم نشرح القيم غير المدعومة إلا في قلّة من المتصفحات لعدم جدوى ذلك.

القيمة `auto`

ستؤدي إلى استخدام قيمة الخاصية align-items للعنصر الأب.

القيمة `flex-start`

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

القيمة `flex-end`

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

القيمة `center`

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

القيمة `stretch`

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

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

align-self: auto | 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.

أمثلة

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

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

القيمة auto

القيمة flex-start

القيمة flex-end

القيمة center

القيمة stretch