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

BootStrap Flex Grow and Shrink النمو والانكماش في flexbox في bootstrap

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

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

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

الصف 1 شرح توضيحي
  • يستخدم كلاس flex-grow-1 بنفس طريقة كلاس flex-fill ويؤدي نفس الوظيفة حيث يجعل العنصر يستمر في النمو حتى يشغل كل المساحة المتبقية من parent element.
  • اما كلاس flex-shrink-1 فيستخدم لعمل العكس حيث يجبر العنصر على الانكماش وعمل wrap للمحتوى الذي بداخله ليشغل اقل مساحة ممكنة.
جرّب بنفسك

Flex Grow and Shrink

استخدام كلاس flex-grow و flex-shrink.

HTML 
<!-- Flex Grow -->
<div class="d-flex text-white mb-3">
   <div class="p-2 bg-primary">Flex item with a lot of content</div>
   <div class="p-2 flex-grow-1 bg-success">Flex item</div>
</div>

<!-- Flex Shrink -->
<div class="d-flex text-white">
   <div class="p-2 flex-shrink-1 bg-primary">Flex item with a lot of content</div>
   <div class="p-2 bg-success">Flex item</div>
</div>
جرّب بنفسك

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