شرح صفوف ومحتوى الفقرة
- لا يوفر bootstrap التحكم في اتجاه العناصر داخل parent element فقط ولكن ايضا في عمل محاذاة لهذه العناصر.
- يستخدام كلاس justify-content لعمل محاذاة افقية فالوضع الافتراضي اما في حالة استخدام كلاس flex-column فيستخدم في المحاذاة الراسية.
- justify-content-start: لمحاذاة العناصر في بداية parent element.
- justify-content-center: لمحاذاة العناصر في منتصف parent element.
- justify-content-end: لمحاذاة العناصر في نهاية parent element.
- justify-content-between: توضع العناصر في بداية ومنتصف ونهاية parent element مع ماسافات بينية متساوية بينهم.
- justify-content-around: توزع العناصر على كل parent element مع مسافات متساوية بين كل عنصرين ويكون هناك margin في بداية ونهاية parent element تساوي نصف المسافة بين كل عنصرين.
- justify-content-evenly: توزع العناصر على كل parent element مع مسافات متساوية بين كل عنصرين ويكون هناك margin في بداية ونهاية parent element تساوي المسافة بين كل عنصرين.
Justify Content With Flex
التحكم في محاذاة العناصر باستخدام كلاس justify-content.
HTML
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>