انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: نظام flexbox الصندوق المرن في BootStrap

BootStrap Align Self المحاذاة الذاتية في bootstrap

ستتعلم في هذا الدرس التحكم في تقسيم صفحة الويب ومحاذاة العناصر باستخدام نظام fexbox في bootstrap.

1 صفوف تعليمية
Bootstrap
2,881 مشاهدة

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

الصف 1 شرح توضيحي
  • تضاف مجموعة كلاسات align-items الى container لعمل محاذاة راسية لكل العناصر بداخل هذه الحاوية.
  • تضاف كلاسات align-self الى child element لاعطاء محاذاة تنطبق عليه هو فقط وليس على باقي العناصر.
  • كلاس align-self يتسخدم نفس قيم كلاس align-items وهي ( stretch - start - center - end - baseline ).
جرّب بنفسك

Flex Align Self

عمل محاذاة لكل عنصر داخل flexbox بشكل منفصل.

HTML 
<div class="d-flex align-items-start ">
   <div class="p-2 align-self-start">Align Self Start</div>
   <div class="p-2 align-self-center">Align Self Center</div>
   <div class="p-2 align-self-end">Align Self End</div>
   <div class="p-2 align-self-baseline">Align Self Baseline</div>
   <div class="p-2 align-self-stretch">Align Self Stretch</div>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (نظام flexbox الصندوق المرن في BootStrap)