انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: خاصية align-self مع Flexbox في لغة CSS

Align Self Baseline Axis Note قيمة baseline وبديل المحور الرئيسي

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

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

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

عند اشتراك عنصرين أو أكثر داخل صف في القيمة align-self: baseline، يطابق المتصفح خط القاعدة الطباعي لسطور نصوصهم الأولى، وهو حل مثالي لمحاذاة رقم سعر كبير بحجم 28px مع رمز عملة أصغر بحجم 14px على استقامة بصرية واحدة.

أما على المحور الرئيسي فلا يتضمن نظام Flexbox خاصية باسم justify-self إطلاقاً لأن العناصر تتشارك المحور الرئيسي معاً؛ وبدلاً منها تُعتمد الهوامش التلقائية مثل margin-left: auto أو margin-right: auto لامتصاص الفراغ ودفع زر الدخول منفرداً نحو أقصى طرف شريط التنقل.

الصف 2 كود برمجي
CSS 
.price-big {
  font-size: 28px;
  align-self: baseline;
}
.cta-end {
  align-self: center;
  margin-left: auto;
}
جرّب بنفسك
الصف 3 ملاحظة هامة
الصف 4 ملاحظة هامة

جميع فقرات هذا الدرس (خاصية align-self مع Flexbox في لغة CSS)