شرح صفوف ومحتوى الفقرة
في أدوات المطور DevTools يمكنك النقر على أيقونة المحاذاة البصرية بجانب align-self في تبويب Styles أو مراجعة تبويب Computed للتأكد مما إذا كان العنصر يرث محاذاة الأب أم يطبق استثناءً خاصاً. يجمع الجدول المرجعي الآتي القيم الست القياسية وأولويتها.
| القيمة | الأثر على المحور المتعامد | الأولوية مقابل align-items |
|---|---|---|
align-self: auto | يرث قيمة align-items من الحاوية الأب | يتبع قاعدة الأب افتراضياً |
align-self: stretch | يمتد لطول السطر المتعامد بشرط بقاء البُعد auto | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: flex-start | يدفع العنصر إلى بداية المحور المتعامد | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: center | يوسط العنصر في منتصف المحور المتعامد | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: flex-end | يدفع العنصر إلى نهاية المحور المتعامد | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: baseline | يطابق خط القاعدة النصي الأول مع نظرائه | يتجاوز قاعدة الأب للعنصر المحدد |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت تخصيص محاذاة عنصر مرن منفرد على المحور المتعامد عبر قيم align-self الست من auto وstretch إلى الحواف والمنتصف وbaseline، مع معرفة الاعتماد على الهوامش التلقائية على المحور الرئيسي. وفي الخطوة التالية ننتقل إلى درس خاصية flex في لغة CSS لجمع أركان التحجيم المرن الثلاثة في اختصار احترافي واحد.