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

BootStrap Flex Vertical Direction الاتجاه الراسي في bootstrap

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

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

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

الصف 1 شرح توضيحي
  • باستخدام كلاسات flexbox في bootstrap يمكن عمل لاظهار العناصر داخل container في شكل راسي.
  • يضاف كلاس d-flex اولا الى parent element العنصر الاب لاعطاءه display: flex.
  • يضاف كلاس flex-column لعرض العناصر اسفل بعض بنفس ترتيبها داخل parent element.
  • يضاف كلاس flex-column-reverse لعرض العناصر اسفل بعض بعكس ترتيبها داخل parent element.
جرّب بنفسك

BootStrap Flex Column

ترتيب العناصر راسيا باستخدام flex-column و flex-column-reverse

HTML 
<div class="d-flex flex-column text-white">
   <div class="p-2 bg-danger">Flex item 1</div>
   <div class="p-2 bg-warning">Flex item 2</div>
   <div class="p-2 bg-success">Flex item 3</div>
</div>

<!-- Reverse Column -->
<div class="d-flex flex-column text-white">
   <div class="p-2 bg-danger">Flex item 1</div>
   <div class="p-2 bg-warning">Flex item 2</div>
   <div class="p-2 bg-success">Flex item 3</div>
</div>
جرّب بنفسك

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