خط الأساس مقابل محاذاة البدء المرن

كاسم يقترح أن محاذاة الخط الأساسي تعمل على تثبيت الخطوط الأساسية للعناصر المرنة، وهي الخطوط التي تتواجد فيها معظم الأحرف. سيكون العنصر ذو المسافة القصوى بين خط الأساس وحافة البداية المتقاطعة متوازيًا مع تلك الحافة.

عندما تكون أحجام خطوط العناصر المرنة موحدة أو المحتوى متطابق، قد يبدو البدء المرن وخط الأساس قابلين للتبديل. ومع ذلك، تظهر الاختلافات عندما تختلف أحجام العناصر.

يحدد العنصر الأطول في الصف خط الأساس لمحاذاة خط الأساس.

ضع في اعتبارك مقتطف الكود التالي:

.flex-container { محاذاة العناصر: خط الأساس؛ ... } ... .فليكس البند { حجم الخط: 2em؛ ... } ... .فليكس-item.item2 { حجم الخط: 7em؛

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

[صورة العناصر المرنة المحاذية على ارتفاعات مختلفة باستخدام محاذاة خط الأساس]

الكلمة الأساسية الأساسية غير مدعومة من قبل جميع المتصفحات. للتوافق مع جميع المتصفحات، فكر في استخدام align-items: flex-start بالتزامن مع خاصية المحاذاة العمودية في CSS3.