يوفر bootstrap امكانية التحكم في layout تخطيط اي container حاوية باستخدام كلاسات flexbox.
لعرض الحاوية في صورة flexbox يتم اضافة كلاس d-flex حيث d اختصار لكلمة display.
كلاس d-flex يجعل جميع العناصر بداخل container تظهر جمبا الى جمبا.
يمكن استخدام كلاس d-inline-flex وفي هذه الحالة سياخذ container العرض الذي يحتاجه فقط وليس 100%.

جربها بنفسك

Flex Box

استخدام كلاسات flexbox مع لمحاذاة العناصر افقيا.

<div class="d-flex p-3 bg-primary text-white">
   <div class="p-2 bg-danger">Ahmed</div>
</div>

<div class="d-inline-flex p-3 bg-primary text-white">
   <div class="p-2 bg-danger">Ahmed</div>
</div>

جربها بنفسك

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

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

جربها بنفسك

BootStrap Flex Row

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

<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>

جربها بنفسك

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

باستخدام كلاسات 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

<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>

جربها بنفسك

</> BootStrap Justify Content
ضبط المحتوى في bootstrap

لا يوفر bootstrap التحكم في اتجاه العناصر داخل parent element فقط ولكن ايضا في عمل محاذاة لهذه العناصر.
يستخدام كلاس justify-content لعمل محاذاة افقية فالوضع الافتراضي اما في حالة استخدام كلاس flex-column فيستخدم في المحاذاة الراسية.
justify-content-start: لمحاذاة العناصر في بداية parent element.
justify-content-center: لمحاذاة العناصر في منتصف parent element.
justify-content-end: لمحاذاة العناصر في نهاية parent element.
justify-content-between: توضع العناصر في بداية ومنتصف ونهاية parent element مع ماسافات بينية متساوية بينهم.
justify-content-around: توزع العناصر على كل parent element مع مسافات متساوية بين كل عنصرين ويكون هناك margin في بداية ونهاية parent element تساوي نصف المسافة بين كل عنصرين.
justify-content-evenly: توزع العناصر على كل parent element مع مسافات متساوية بين كل عنصرين ويكون هناك margin في بداية ونهاية parent element تساوي المسافة بين كل عنصرين.

جربها بنفسك

Justify Content With Flex

التحكم في محاذاة العناصر باستخدام كلاس justify-content.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

جربها بنفسك

</> BootStrap Flex Align Items
محاذاة العناصر باستخدام flexbox في bootstrap

تستخدم كلاسات align-items لعمل محاذاة راسية للعناصر داخل container الذي يعمل يمكن استخدامها لعمل محاذاة افقية في حال كان container يعمل بنظام flex-column.

يوجد مجموعة قيم لكلاسات align-items وهي كالاتي:

align-items-stretch: وهو الوضع الافتراض ويتسخدم لاعطاء كل عنصر طول parent element بالكامل.
align-items-start: لمحاذاة العناصر راسيا في بداية parent element.
align-items-center: لمحاذاة العناصر راسيا في منتصف parent element.
align-items-end: لمحاذاة العناصر راسيا في نهاية parent element.
align-items-baseline: لمحاذاة العناصر راسيا بحيث تكون نهاية النص الموجود داخل كل عنصر جميعها على خط افقي واحد.

جربها بنفسك

Flex Align Items

عمل محاذاة راسية للعناصر داخل container يعمل بنظام flex-box.

<div class="d-flex align-items-start bg-secondary text-white mb-2">
   <div class="p-2 bg-primary">Flex Start 1</div>
   <div class="p-2 bg-primary">Flex Start 2</div>
   <div class="p-2 bg-primary">Flex Start 3</div>
</div>

جربها بنفسك

</> BootStrap Align Self
المحاذاة الذاتية في bootstrap

تضاف مجموعة كلاسات align-items الى container لعمل محاذاة راسية لكل العناصر بداخل هذه الحاوية.
تضاف كلاسات align-self الى child element لاعطاء محاذاة تنطبق عليه هو فقط وليس على باقي العناصر.
كلاس align-self يتسخدم نفس قيم كلاس align-items وهي ( stretch - start - center - end - baseline ).

جربها بنفسك

Flex Align Self

عمل محاذاة لكل عنصر داخل flexbox بشكل منفصل.

<div class="d-flex align-items-start ">
   <div class="p-2 align-self-start">Align Self Start</div>
   <div class="p-2 align-self-center">Align Self Center</div>
   <div class="p-2 align-self-end">Align Self End</div>
   <div class="p-2 align-self-baseline">Align Self Baseline</div>
   <div class="p-2 align-self-stretch">Align Self Stretch</div>
</div>

جربها بنفسك

</> BootStrap Fill
الملئ في bootstrap

في الوضع الافتراضي في حالة استخدام d-flex فان كل child element يشغل عرضا مساوي للمحتوي الذي بداخله فقط.
عند اضافة كلاس flex-fill الى child element يقوم هذا العنصر باخذ باقي مساحة parent element المتبقية ويضيفها الى مساحته الخاصة.
عند اضافة كلاس flex-fill الى اكثر من child element يتم توزيع المساحة المتبقية من parent element مع كل العناصر التي تحتوي على كلاس flex-fill بالتساوي.

جربها بنفسك

Flex Fill

توزيع المساحة المتبقية بداخل parent element على child elements.

<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>

جربها بنفسك

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

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

جربها بنفسك

Flex Grow and Shrink

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

<!-- 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>

جربها بنفسك

</> BootStrap Auto Margins
الهوامش التلقائية في bootstrap

يضاف كلاس me-auto الى child element لعمل هوامش بينه وبين العناصر التي تليه حيث يقوم بمحاذاة هذه العناصر ناحية اليمين.
يضاف كلاس ms-auto الى child element لعمل هوامش لعمل هوامش بينه وبين العناصر التي تسبقه حيث يقوم بمحاذاة هذه العناصر ناحية اليسار.
يضاف كلاس mb-auto الى child element في حالة flex-column لعمل هوامش بينه وبين العناصر التي تليه حيث يقوم بمحاذاة هذه العناصر الى الاسفل.
يضاف كلاس mt-auto الى child element في حالة flex-column لعمل هوامش بينه وبين العناصر التي تسبقة حيث يقوم بمحاذاة هذه العناصر الى الاعلى.

جربها بنفسك

Auto Margins

عمل هوامش تلقائية في flexbox.

<!-- me-auto -->
<div class="d-flex text-white mb-3">
   <div class="p-2 me-auto bg-primary">Flex Item</div>
   <div class="p-2 bg-primary">Flex Item</div>
   <div class="p-2 bg-primary">Flex item</div>
</div>

<!-- ms-auto -->
<div class="d-flex text-white">
   <div class="p-2 bg-primary">Flex item</div>
   <div class="p-2 bg-primary">Flex item</div>
   <div class="p-2 ms-auto bg-primary">Flex item</div>
</div>

جربها بنفسك

</> BootStrap Order
الترتيب في bootstrap

يمكن التحكم في الترتيب التي تظهر به العناصر داخل flexbox عن طريق استخدام كلاس *-order حيث * هي رقم من 0 الى 5 .

جربها بنفسك

Flex Order

ترتيب العناصر داخل flexbox.

<div class="d-flex flex-nowrap bg-secondary py-3 text-white">
   <div class="order-3 p-2 bg-primary">First Item</div>
   <div class="order-2 p-2 bg-primary">Second Item</div>
   <div class="order-1 p-2 bg-primary">Third Item</div>
</div>

جربها بنفسك

</> BootStrap Wrap
الالتفاف في bootstrap

تستخدم خاصية wrap للتحكم في ما اذا كنت تريد للعناصر ان تقوم بالالتفاف والنزول الى سطر جديد ام لا عندما ينتهي عرض flxbox.
الوضع الافتراضي في flexbox هو flex-nowrap فلا يسمح للعناصر بالنزول الى سطر جديد.
لتفعيل خاصية wrap نقوم باضافة كلاس flex-wrap الى parent element.
يمكن ايضا عمل reverse wrap باستخدام كلاس flex-wrap-reverse.

جربها بنفسك

Flex Warp

مثال على استخدام كلاسات flex-wrap.

<div class="d-flex flex-nowrap">..</div>

<div class="d-flex flex-wrap">..</div>

<div class="d-flex flex-wrap-reverse">..</div>

جربها بنفسك

</> BootStrap Align Content
محاذاة المحتوى في bootstrap

تستخدم كلاسات align-content للتحكم في المحاذاة الراسية لكل المحتوى بداخل flexbox.
align-content-start لمحاذاة المحتوى بالكامل الى الاعلى.
align-content-center لمحاذاة المحتوى بالكامل الى المنتصف.
align-content-end لمحاذاة المحتوى بالكامل الى الاسفل.
align-content-between لمحاذاة المحتوى الى الاعلى والاسفل مع وجود مسافة فارغة في الوسط.
align-content-around لمحاذاة المحتوى الى الاعلى والاسفل مع وجود مسافة فارغة في الوسط ونصف هذه المساحة في الاعلى والاسفل.
align-content-stretch لمحاذاة المحتوى راسيا بحيث يشغل كل ارتفاع العنصر الاب.

جربها بنفسك

Flex Align Content

محاذاة المحتوى راسيا.

<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

<div class="d-flex flex-wrap align-content-center">..</div>

<div class="d-flex flex-wrap align-content-around">..</div>

<div class="d-flex flex-wrap align-content-stretch">..</div>

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

Bootstrap Flex
نظام flexbox الصندوق المرن في BootStrap

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Bootstrap Flex Bootstrap

Bootstrap Flex

نظام fexbox الصندوق المرن في BootStrap