Bootstrap Flex
نظام flexbox الصندوق المرن في BootStrap
ستتعلم في هذا الدرس التحكم في تقسيم صفحة الويب ومحاذاة العناصر باستخدام نظام fexbox في bootstrap.
التاريخ
08 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1525
المواضيع
6
Bootstrap Flex
نظام fexbox الصندوق المرن في BootStrap
</>
Bootstrap Flex
نظام flexbox الصندوق المرن في bootstrap
- يوفر 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
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
×
![]()
×
![]()