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

Align Items and Align Self المحاذاة بالمحور العمودي

أتقن أدوات الصندوق المرن والتكديس في بوتستراب 5.3 شاملة حاويات واتجاهات d-flex، وتوزيع ومحاذاة المحاور، والتمدد والانكماش والالتفاف، واختصارات vstack وhstack وتخطيط الوسائط الحديث.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

على المحور العمودي المتقاطع مع اتجاه الصف، يتحكم كلاس .align-items-* في محاذاة جميع الأبناء دفعة واحدة: فيمددهم stretch (الافتراضي) لتتساوى ارتفاعاتهم، أو يوسطهم رأسياً بـ center، أو يثبتهم بالأعلى start أو بالأسفل end، أو يطابق خط كتابة الحروف عبر baseline عند اختلاف أحجام النصوص.

وإذا أردت استثناء عنصر فرعي واحد فقط ليهبط إلى أسفل الصندوق بينما يبقى زملاؤه في الأعلى، امنح ذلك الابن وحده كلاس .align-self-end أو .align-self-center.

الصف 2 معاينة حية