يقدم CSS3 نموذجًا جديدًا للصندوق - نموذج الصندوق المرن، الذي يحدد كيفية توزيع الصندوق بين الصناديق الأخرى وكيفية التعامل مع المساحة المتوفرة. وهذا مشابه لـ XUL (لغة تفاعل المستخدم التي يستخدمها Firefox)، كما تستخدم اللغات الأخرى نفس نموذج الصندوق، مثل XAML وGladeXML.
باستخدام هذا النموذج، يمكنك بسهولة إنشاء تخطيط مرن يتكيف مع نافذة المتصفح أو تخطيط مرن يتكيف مع حجم الخط. تستخدم الأمثلة الموجودة في هذه المقالة تعليمات HTML البرمجية التالية:
<الجسم>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</الجسم>
يقوم نموذج الصندوق التقليدي بترتيب الصناديق عموديًا بناءً على تدفق HTML. باستخدام نموذج flexbox يمكنك تحديد ترتيب معين وعكسه. لتمكين نموذج الصندوق المرن، ما عليك سوى تعيين قيمة سمة العرض للمربع الذي يحتوي على مربعات فرعية على المربع (أو المربع المضمن).
عرض: مربع؛
التوزيع الأفقي أو العمودي
يحدد "الموجه الصندوقي" محاور إحداثيات التوزيع: الرأسي والأفقي. تحدد هاتان القيمتان كيفية عرض المربع
جسم{
عرض: مربع؛
اتجاه الصندوق: أفقي؛
}
التوزيع العكسي
يمكن لـ "box-direction" ضبط الترتيب الذي تظهر به المربعات. افتراضيًا، ما عليك سوى تحديد محور التوزيع - يتم توزيع المربعات باستخدام تدفق HTML. وإذا كان محوراً أفقياً فيتم توزيعه من اليسار إلى اليمين؛ وإذا كان محوراً عمودياً فيوزع من الأعلى إلى الأسفل. حدد قيمة السمة "اتجاه الصندوق" على أنها "عكسية" لعكس ترتيب المربعات.
جسم {
عرض: مربع؛
اتجاه الصندوق: عمودي؛
اتجاه الصندوق: عكسي؛
}
توزيع محدد
تحدد السمة "box-ordinal-group" الترتيب الذي يتم به توزيع الصناديق. يمكن التحكم في ترتيب التوزيع حسب الرغبة. يتم تعريف المجموعات برقم يبدأ من "1" وسيقوم نموذج الصندوق بتوزيع هذه المجموعات أولاً وستكون جميع هذه المربعات في كل مجموعة. سيتم ترتيب التوزيع من الصغير إلى الكبير.
جسم {
عرض: مربع؛
اتجاه الصندوق: عمودي؛
اتجاه الصندوق: عكسي؛
}
#box1 {
مجموعة ترتيبية مربعة: 2؛
}
#box2 {
مجموعة ترتيبية مربعة: 2؛
}
#box3 {
مجموعة ترتيبية مربعة: 1؛
}
