شرح صفوف ومحتوى الفقرة
بينما يدير نظام الشبكة ذو الاثني عشر عموداً الهياكل الكبرى للصفحة، يتكفل نظام الصندوق المرن Flexbox بترتيب العناصر الدقيقة داخل الأشرطة والبطاقات ورؤوس الأقسام بمرونة فائقة. لتفعيل هذا السياق على أي حاوية، ضع كلاس .d-flex لصندوق مرن كتلي كامل العرض، أو .d-inline-flex لصندوق مرن ينكمش على قدر محتواه، مع توفر النسخ المتجاوبة مثل .d-md-flex.
يتحكم كلاس الاتجاه في مسار المحور الرئيسي: يصطف الأبناء أفقياً افتراضياً مع .flex-row (من اليمين لليسار في العربية ومن اليسار لليمين في الإنجليزية) أو عكسياً عبر .flex-row-reverse، ويتحولون إلى عمود رأسي عبر .flex-column؛ مما يجعل التحويل المتجاوب flex-column flex-md-row الأداة الأهم لتكديس العناصر عمودياً على الهاتف وصفّها أفقياً على الحاسوب.
الشكل 1: الركائز الأربع لتخطيطات الصندوق المرن والتكديس السريع في Bootstrap 5.3.
HTML
<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>