الإضافة إلى مسألة التفريق بين البعد الواحد والأبعاد الثّنائية، هناك طريقة أخرى لتقرّر ما إذا كان عليك استخدام flexbox أو الشّبكة لأجل التخطيط. يتكيّف flexbox مع حجم المحتوى. فمن الحالات المثالية لاستخدام flexbox هي عندما يكون لديك مجموعة من العناصر التي تريد توزيعها بالتساوي في الوعاء. بحيث يتمّ تحديد المساحة التي سيشغلها كل عنصر على حسب حجم المحتوى. وإذا انتظمت العناصر في سطر جديد، فستتوزع على أساس أحجامها والمساحة المتاحة في ذلك السّطر.
الشّبكة تعمل في الاتجاه الداخلي للخطاطة layout in، فعند استخدام خطاطة CSS الشّبكيّة يتمّ إنشاء خطاطة ثم توضع العناصر فيها، وفي حال استخدام قواعد auto-placement ستوضع العناصر في خلايا الشّبكة وفقا للشّبكة الصارمة strict grid. هناك إمكانيّة لإنشاء مدارج tracks تتكيّف مع حجم المحتوى، ولكنّها ستغيّر أيضا كامل المدرج.
إذا كنت تستخدم flexbox وتشعر أنّك تفتقد بعض المرونة، فربّما عليك استخدام خطاطة CSS الشّبكيّة. على سبيل المثال إذا حدّدت عرض width عنصر مرن (flex item) بنسبة مئوية لجعله يصطف مع العناصر الأخرى في الصّف الأعلى. في هذه الحالة، فمن المحتمل أن يكون استخدام الشّبكة خيارًا أفضل لك.

محاذاة المربّع Box alignment
لعلّ من أكثر سمات flexbox إثارة هي أنه مكّننا لأول مرة من التحكم في المحاذاة بشكل صحيح. فقد جعل من السهل توسيط مربع على الصفحة. ويمكن للعناصر المرنة الامتداد على كامل ارتفاع الوعاء، وهذا يعني أنّه صار من الممكن الحصول على أعمدة متساوية الارتفاع. وهي أشياء كنّا نريد القيام به منذ فترة طويلة جدا، كما أنها جاءت مرفقة بجميع أنواع الحيل لمساعدتنا على خلق التأثير البصري الذي نريد.
خصائص المحاذاة المحدّدة في المواصفات القياسيّة specification لـ flexbox قد تمّ إضافتها إلى مواصفات قياسيّة جديدة تسمّى Box Alignment Level 3 . وهذا يعني أنّه يمكن استخدامها في مواصفات قياسيّة أخرى، بما في ذلك الخُطاطة الشّبكيّة. وفي المستقبل، قد تنطبق أيضًا على أساليب التخطيط الأخرى. إليك الآن مثالًا بسيطًا لمقارنة flexbox والشّبكة.
في المثال الأول، والذي يستخدم flexbox، لدينا وعاء يحتوي ثلاثة عناصر. تمّ تعيين خاصيّة min-height للغلافwrapper ، لتحديد ارتفاع الوعاء المرن flex container. سنعطي أيضا للخاصيّة align-items الخاصّة بالوعاء المرن القيمة flex-end، وبالتالي فإن العناصر سوف تصطفّ في نهاية الوعاء. كما أنّنا أيضا سنحدد الخاصية align-self لـ box1 حتّى تستبدل السّلوك الافتراضي وتمتد على كامل ارتفاع الوعاء وعلى box2 حتّى يصطفّ في بداية الوعاء المرن.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
.wrapper {
display: flex;
align-items: flex-end;
min-height: 200px;
}
.box1 {
align-self: stretch;
}
.box2 {
align-self: flex-start;
}