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

BootStrap Horizontal Direction الاتجاه الافقي في bootstrap

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

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

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

الصف 1 شرح توضيحي
  • بعد ان نقوم بعمل display: flex باستخدام كلاس d-flex تاتي مرحلة تحديد اتجاه محاذاة العناصر داخل container.
  • يستخدام كلاس flex-row لعمل محاذاة افقية وهي الوضع الافتراضي فتكون المحاذاة افقية وفي بداية container.
  • يستخدام كلاس flex-row-reverse ايضا لعمل محاذاة افقية لكن تبدا المحاذاة من نهاية container وليس من البداية.
جرّب بنفسك

BootStrap Flex Row

عرض العناصر بترتيب افقي باستخدام flex-row و flex-row-reverse.

HTML 
<div class="d-flex flex-row bg-primary text-white">
   <div class="p-2 bg-danger">Flex item 1</div>
   <div class="p-2 bg-warning">Flex item 2</div>
</div>
        
<div class="d-flex flex-row-reverse bg-primary mt-3 text-white">
   <div class="p-2 bg-danger">Flex item 1</div>
   <div class="p-2 bg-warning">Flex item 2</div>
</div>
جرّب بنفسك

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