في هذا الدرس 7تصفّح المواضيع
بينما يدير نظام الشبكة ذو الاثني عشر عموداً الهياكل الكبرى للصفحة، يتكفل نظام الصندوق المرن Flexbox بترتيب العناصر الدقيقة داخل الأشرطة والبطاقات ورؤوس الأقسام بمرونة فائقة. لتفعيل هذا السياق على أي حاوية، ضع كلاس .d-flex لصندوق مرن كتلي كامل العرض، أو .d-inline-flex لصندوق مرن ينكمش على قدر محتواه، مع توفر النسخ المتجاوبة مثل .d-md-flex.
يتحكم كلاس الاتجاه في مسار المحور الرئيسي: يصطف الأبناء أفقياً افتراضياً مع .flex-row (من اليمين لليسار في العربية ومن اليسار لليمين في الإنجليزية) أو عكسياً عبر .flex-row-reverse، ويتحولون إلى عمود رأسي عبر .flex-column؛ مما يجعل التحويل المتجاوب flex-column flex-md-row الأداة الأهم لتكديس العناصر عمودياً على الهاتف وصفّها أفقياً على الحاسوب.
<div class="d-flex flex-column flex-md-row gap-2
p-3 bg-body-tertiary rounded-3">
<div class="p-2 text-bg-primary rounded">Step 1</div>
<div class="p-2 text-bg-secondary rounded">Step 2</div>
<div class="p-2 text-bg-dark rounded">Step 3</div>
</div>توزع عائلة .justify-content-* المساحة الفارغة على طول المحور الرئيسي للحاوية بستة أنماط قياسية: start للبداية المنطقية، وend للنهاية، وcenter للتوسيط المتلاصق، وbetween لدفع أول وآخر عنصر إلى الحافتين وتوزيع الفراغ بينهما، وaround لهوامش محيطة نصفية، وevenly لمسافات متطابقة تماماً بين العناصر والحواف.
يُعد النمط .justify-content-between الأكثر استخداماً في بناء رؤوس البطاقات وأشرطة الأدوات التي تضع العنوان في جهة وأزرار التحكم في الجهة المقابلة.
على المحور العمودي المتقاطع مع اتجاه الصف، يتحكم كلاس .align-items-* في محاذاة جميع الأبناء دفعة واحدة: فيمددهم stretch (الافتراضي) لتتساوى ارتفاعاتهم، أو يوسطهم رأسياً بـ center، أو يثبتهم بالأعلى start أو بالأسفل end، أو يطابق خط كتابة الحروف عبر baseline عند اختلاف أحجام النصوص.
وإذا أردت استثناء عنصر فرعي واحد فقط ليهبط إلى أسفل الصندوق بينما يبقى زملاؤه في الأعلى، امنح ذلك الابن وحده كلاس .align-self-end أو .align-self-center.
للتحكم في كيفية تقاسم العناصر للمساحة المتبقية داخل السطر المرن، يقدم بوتستراب ثلاث أدوات دقيقة:
- ملء السطر بالتناسب (
.flex-fill): عند تطبيقه على مجموعة أشقاء، يتمدد الجميع لملء 100% من عرض الحاوية مع منح العناصر ذات النص الأطول حصة أوسع تناسبياً. - التمدد الانتقائي (
.flex-grow-1و.flex-grow-0): يجعل.flex-grow-1عنصراً محدداً (كحقل البحث الأوسط) يلتهم كامل المسافة الفارغة وحده بينما تبقى الأيقونات الجانبية بحجمها الطبيعي. - منع الانكماش القسري (
.flex-shrink-0): يحمي الصور المصغرة والأيقونات الدائرية من الانضغاط والتشوه عندما يطول النص في العنصر المجاور لها.
<div class="d-flex gap-2 p-2 bg-body-tertiary rounded-3">
<div class="p-2 text-bg-secondary rounded flex-shrink-0">
Fixed Tag
</div>
<div class="p-2 text-bg-primary rounded flex-grow-1">
Expands to fill remaining horizontal space
</div>
</div>يحاول الصندوق المرن افتراضياً حشر جميع أبنائه في سطر واحد (.flex-nowrap) مما قد يضغطهم على الشاشات الضيقة؛ وبإضافة .flex-wrap تسمح للعناصر الفائضة بالنزول بسلاسة إلى سطر جديد كوسوم المهارات، مع إمكانية ضبط تباعد الأسطر المتعددة عبر .align-content-between أو .gap-2.
ومن أقوى الحيل الهندسية في Flexbox دمج الهوامش التلقائية: فوضع .ms-auto على عنصر واحد يفصل شريط التنقل إلى مجموعتين بدفعه إلى أقصى النهاية، ووضع .mt-auto على تذييل بطاقة داخل عمود flex-column يثبت التذييل في قاع البطاقة مهما قصر النص أعلاه!
لاحظ فريق بوتستراب تكرار كتابة المطورين لثلاثة كلاسات معاً في كل مكان لبناء تكديس عمودي أو أفقي، فقدم في الإصدار 5.1+ أداتين مختصرتين عاليتي القراءة:
- التكديس الرأسي (
.vstack): يختصر كتابةd-flex flex-column align-self-stretchلرصّ العناصر والبطاقات عمودياً بملء العرض، ويقترن عادةً مع.gap-2أو.gap-3. - التكديس الأفقي (
.hstack): يختصر كتابةd-flex flex-row align-items-centerلصفّ العناصر والأدوات أفقياً مع توسيطها رأسياً تلقائياً!
<div class="vstack gap-2 mb-3">
<div class="p-2 border rounded">Row 1</div>
<div class="p-2 border rounded">Row 2</div>
</div>
<div class="hstack gap-2 p-2 border rounded">
<span>Filter: Active</span>
<span class="ms-auto text-primary">Reset</span>
</div>في الإصدار الرابع من بوتستراب كان هناك مكوّن شهير لعرض التعليقات والإشعارات المصورة، لكن بوتستراب 5 استغنى عنه بالكامل لأنك تستطيع بناءه اليوم بكود أنظف وأكثر مرونة بثلاثة كلاسات قياسية فقط: حاوية .d-flex .align-items-center (أو align-items-start للتعليقات الطويلة)، بداخلها غلاف صورة يحمل .flex-shrink-0 لمنع انكماشها، يليه غلاف النص المزود بكلاسي .flex-grow-1 .ms-3 ليتمدد ويترك مسافة منطقية تدعم العربية والإنجليزية تلقائياً:
<div class="d-flex align-items-start p-3 border rounded-3">
<div class="flex-shrink-0">
<img src="/images/examples/studio-desk-3x2.webp"
width="72" height="72" class="rounded object-fit-cover"
alt="Workstation">
</div>
<div class="flex-grow-1 ms-3">
<h3 class="h6 mb-1">Modular Workspace Guide</h3>
<p class="small mb-0">Built with pure BS5 Flexbox.</p>
</div></div>يلخص الجدول المرجعي التالي منظومة كلاسات الصندوق المرن والتكديس في بوتستراب 5.3:
| المجموعة | الكلاسات القياسية | الدور التخطيطي |
|---|---|---|
| تفعيل الحاوية والاتجاه | .d-flex, .d-inline-flex, .flex-column, .flex-md-row | إنشاء سياق مرن وتحديد المحور الرئيسي متجاوباً |
| توزيع المحور الرئيسي | .justify-content-between, center, evenly | توزيع الفراغ بين العناصر أو توسيطها على المحور الأساسي |
| محاذاة المحور العمودي | .align-items-center, .align-self-end | محاذاة جميع الأبناء عمودياً أو استثناء عنصر مفرد |
| التمدد والانكماش | .flex-fill, .flex-grow-1, .flex-shrink-0 | ملء المساحة الفارغة وحماية الصور من الانضغاط |
| الالتفاف والدفع الذكي | .flex-wrap, .ms-auto, .mt-auto | التفاف السطور المتعددة ودفع العناصر للحواف البعيدة |
| التكديس المختصر | .vstack, .hstack + .gap-* | بناء أعمدة وصفوف متراصة ومصطفة بأقل عدد كلاسات |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس تفعيل الصندوق المرن وتبديل اتجاهاته متجاوباً، وضبط المحورين الرئيسي والعمودي، والتحكم في التمدد والانكماش والالتفاف ودفع العناصر بـ ms-auto، واستخدام اختصارات vstack وhstack وبناء تخطيط الوسائط الحديث.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «أدوات النصوص والخطوط والروابط في بوتستراب 5» لإتقان محاذاة النصوص وأحجامها وأوزانها واقتطاع السطور الطويلة وتنسيق الروابط.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Vertical Stack (.vstack) التكديس الرأسي المختصر
- أداة مختصرة تفعل الصندوق المرن العمودي الممتد العرض لترتيب العناصر رأسياً بأناقة مع gap.
- للمراجعة
- 02 Horizontal Stack (.hstack) التكديس الأفقي المختصر
- أداة مختصرة تفعل الصندوق المرن الأفقي مع توسيط العناصر رأسياً تلقائياً لبناء الأشرطة.
- للمراجعة
- 03 Flex Shrink Zero منع الانكماش المرن
- كلاس يمنع تقلص عرض الصورة أو الأيقونة عندما يطول النص المكتوب في العنصر المجاور لها.
- للمراجعة
- 04 Modern Media Object تخطيط الوسائط المرن الحديث
- النمط القياسي في بوتستراب 5 لبناء بطاقات التعليقات المصورة عبر d-flex وflex-shrink-0 وflex-grow-1.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- توفر وحدة تخطيط الصندوق المرن التي تبني عليها كلاسات d-flex وvstack وhstack.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه الواجهة العربية حيث يبدأ flex-row من اليمين تلقائياً ويدفع ms-auto العنصر لأقصى اليسار.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- الترتيب الهيكلي للعناصر الذي يتبعه مؤشر لوحة المفاتيح Tab حتى عند عكس الاتجاه بصرياً.
- للمراجعة
- 04 UI UI
- User Interface
- طبقة الواجهة التي ينظم فيها الصندوق المرن أشرطة العناوين والوسوم والتعليقات بمرونة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حاوية <div class="hstack gap-2 p-3 border rounded-3"> تضم عنصرين في البداية وعنصراً ثالثاً مدفوعاً إلى أقصى نهاية السطر عبر كلاس ms-auto.
-
أنشئ حاوية بكلاسات d-flex align-items-center تضم غلاف صورة بكلاس flex-shrink-0 للصورة /images/examples/laptop-pro.webp وبجواره غلاف نصي بكلاسي flex-grow-1 وms-3.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي تركيبة كلاسات ترص العناصر عمودياً على الهاتف وتحولها إلى صف أفقي بدءاً من شاشات md فأكبر؟
يرص d-flex flex-column العناصر عمودياً على الهاتف ثم يحولها flex-md-row إلى صف أفقي عند 768px فأعلى.
ما الخصائص الثلاث المدمجة تلقائياً داخل أداة الاختصار .hstack في بوتستراب 5؟
يفعل .hstack العرض المرن في صف أفقي مع توسيط العناصر رأسياً تلقائياً (align-items: center).
داخل شريط أفقي يحمل .d-flex، أي كلاس يدفع عنصراً واحداً بمفرده إلى أقصى حافة النهاية المنطقية؟
يمتص الكلاس المنطقي .ms-auto كامل الفراغ المتاح قبل العنصر فيدفعه إلى أقصى نهاية السطر.
عند إضافة .flex-column إلى حاوية .d-flex، هل ينتقل الكلاس .justify-content-* للتحكم في التوزيع الرأسي؟
صحيح؛ يدير justify-content المحور الرئيسي دائماً، ومع flex-column يصبح المحور الرئيسي عمودياً.
في نمط تخطيط الوسائط الحديث في بوتستراب 5، لماذا يوضع كلاس .flex-shrink-0 على غلاف الصورة المصغرة؟
لمنع انضغاط عرض الصورة المصغرة أو تشوهها عندما يحتوي العنصر النصي المجاور على فقرة طويلة.
أي كلاس يسمح لعناصر الصندوق المرن بالالتفاف والنزول إلى أسطر جديدة عند امتلاء عرض الحاوية؟
يسمح الكلاس .flex-wrap بالتفاف العناصر الزائدة إلى سطر جديد بسلاسة بدلاً من انضغاطها.
هل يغيّر الكلاس .flex-row-reverse ترتيب انتقال مفتاح Tab في شجرة HTML إلى جانب عكسه البصري؟
خطأ؛ يقتصر تأثير .flex-row-reverse على الرسم البصري فقط ويبقى تسلسل مفتاح Tab تابعاً لترتيب الكود في DOM.
أي كلاس يجعل عنصراً واحداً بعينه يتمدد لشغل كامل المساحة الأفقية المتبقية داخل صف .d-flex؟
يمنح الكلاس .flex-grow-1 ذلك العنصر قابلية التمدد لملء كامل الفراغ المتبقي في السطر.