التمدد والانكماش بـ Flexbox | الصندوق المرن والتكديس في بوتستراب 5

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

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

للتحكم في كيفية تقاسم العناصر للمساحة المتبقية داخل السطر المرن، يقدم بوتستراب ثلاث أدوات دقيقة:

ملء السطر بالتناسب (.flex-fill): عند تطبيقه على مجموعة أشقاء، يتمدد الجميع لملء 100% من عرض الحاوية مع منح العناصر ذات النص الأطول حصة أوسع تناسبياً.
التمدد الانتقائي (.flex-grow-1 و.flex-grow-0): يجعل .flex-grow-1 عنصراً محدداً (كحقل البحث الأوسط) يلتهم كامل المسافة الفارغة وحده بينما تبقى الأيقونات الجانبية بحجمها الطبيعي.
منع الانكماش القسري (.flex-shrink-0): يحمي الصور المصغرة والأيقونات الدائرية من الانضغاط والتشوه عندما يطول النص في العنصر المجاور لها.

الصف 2 كود برمجي

HTML

<div class="d-flex gap-2 p-2 bg-body-tertiary rounded-3">
  <div class="p-2 text-bg-secondary rounded flex-shrink-0">
    Fixed Tag
  </div>
  <div class="p-2 text-bg-primary rounded flex-grow-1">
    Expands to fill remaining horizontal space
  </div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Flex Fill Grow and Shrink التمدد والانكماش بـ Flexbox

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

جميع فقرات هذا الدرس (الصندوق المرن والتكديس في بوتستراب 5)