شرح صفوف ومحتوى الفقرة
- في الوضع الافتراضي في حالة استخدام d-flex فان كل child element يشغل عرضا مساوي للمحتوي الذي بداخله فقط.
- عند اضافة كلاس flex-fill الى child element يقوم هذا العنصر باخذ باقي مساحة parent element المتبقية ويضيفها الى مساحته الخاصة.
- عند اضافة كلاس flex-fill الى اكثر من child element يتم توزيع المساحة المتبقية من parent element مع كل العناصر التي تحتوي على كلاس flex-fill بالتساوي.
Flex Fill
توزيع المساحة المتبقية بداخل parent element على child elements.
HTML
<div class="d-flex text-white mb-3">
<div class="p-2 flex-fill bg-primary">Flex item with a lot of content</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-danger">Flex item</div>
</div>
<!-- Flex Fill On All Child Elements -->
<div class="d-flex text-white">
<div class="p-2 flex-fill bg-primary">Flex item with a lot of content</div>
<div class="p-2 flex-fill bg-success">Flex item</div>
<div class="p-2 flex-fill bg-danger">Flex item</div>
</div>