انتقل إلى محتوى الدرس

Align Self Individual Override محاذاة عنصر منفرد بـ align-self

تعلّم كيف تمنح خاصية align-self عنصراً مرناً منفرداً محاذاة مستقلة على المحور المتعامد متجاوزةً إعدادات الحاوية عبر قيم auto و stretch و center والحواف و baseline مع فهم بديل المحور الرئيسي.
3 صفوف تعليمية
لغة CSS
2,894 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

في الصف الأفقي flex-direction: row يمتد المحور المتعامد عمودياً فتحرك align-self ذلك العنصر للأعلى أو للأسفل أو للمنتصف الرأسي؛ أما في العمود الرأسي flex-direction: column فيصبح المحور المتعامد أفقياً فتتحكم في تموضعه يميناً أو يساراً أو وسطاً.

الصف 2 صورة توضيحية
مخطط يوضح وراثة محاذاة الأب بقيمة auto مقارنة باستثناء عنصر منفرد في المنتصف أو الحافة
الصف 3 ملاحظة هامة