آخر محاذاة خط الأساس

تدعم الآن جميع محرّكات المتصفّحات الرئيسية محاذاة خط الأساس الأخير في شبكة CSS وflexbox.

راشيل أندرو

تتوفّر الآن ميزة التوافق باستخدام الكلمتَين الرئيسيتَين first وlast في كل المحرّكات الرئيسية. وهذا يعني أنه يمكننا استخدام محاذاة خط الأساس الأخيرة كخيار آخر عند محاذاة مجموعات من العناصر المرنة أو عناصر الشبكة.

محاذاة خط الأساس الأول

في حال ضبط القيمة align-items على baseline، ستكون النتيجة هي محاذاة خط الأساس الأولى. وبالتالي، سيتوافق الخط القاعدي الأول للعنصر الذي تعمل على محاذاته (الموضّح على أنّه موضوع المحاذاة) مع خط الأساس الأول للعناصر الأخرى في المجموعة. يمكنك الاطّلاع على ذلك في المثال التالي، حيث تتم محاذاة أول عنصرَين مرنَين باستخدام السمة align-items: baseline، لكي تتم محاذاتهما مع خط الأساس الذي تم إنشاؤه من خلال النص الأكبر. تتم محاذاة العنصر النهائي مع flex-start، وبالتالي تتم محاذاته مع بداية الحاوية المرنة.

آخر محاذاة للمرجع

عند محاذاة شبكة أو عنصر مرن مع القيمة last baseline، ستتم محاذاة آخر مرجع لذلك العنصر مع آخر مرجع لمجموعة المشاركة الأساسية التي يشكّل جزءًا منها. يوضّح المثال التالي آخر محاذاة للمرجع، مع محاذاة أول عنصر مرن مع آخر سطر من النص في العنصر الأكبر. يتطابق العنصر الأخير في هذه المجموعة مع العنصر flex-end، وهو نهاية الحاوية المرنة.

محاذاة احتياطي

إذا لم يكن هناك مجموعة مشاركة أساسية لمحاذاتها مع موضوع المحاذاة، سيتم استخدام محاذاة احتياطية. بالنسبة إلى baseline وfirst baseline، المحاذاة الاحتياطية هي start، وبالنسبة إلى last baseline، المحاذاة الاحتياطية هي end.

جزء من سلسلة الألعاب القابلة للتشغيل التفاعلي مؤخرًا