العناصر المرنة بغض النظر عن الهوامش وحجم مربع الحدود

في flexbox، عن طريق تعيين flex: 1 1 33.33% والهامش: 10px على flex العناصر، يمكن للمرء أن يتوقع ثلاثة صناديق لكل صف. ومع ذلك، مع التغليف المرن: التغليف، لا تتقلص الصناديق لتناسب ثلاثة في كل صف.

السبب يكمن في طبيعة تغيير حجم الصندوق: صندوق الحدود. في حين أن هذه الخاصية تتضمن الحشو والحدود في حسابات العرض والارتفاع، إلا أنها تستبعد الهوامش. يتم حساب الهوامش بشكل منفصل، وبشكل افتراضي، تحتوي العناصر المرنة على انكماش مرن: 1، مما يسمح لها بالتقليص لتناسب الحاوية.

لحل هذه المشكلة، يمكن للمرء تجاوز السلوك الافتراضي عن طريق تعيين flex- يتقلص: 0. هذا يمنع العناصر المرنة من الانكماش في الهوامش.

الحل الآخر هو ضبط قيمة الأساس المرن مع الحفاظ على النمو المرن: 1. نظرًا لعدم وجود حاجة إلى الأساس المرن لفرض الالتفاف بسبب استهلاك المساحة الحرة للنمو المرن، يمكن للمرء تقليل القيمة لاستيعاب الهوامش. من خلال تعيين flex: 1 1 26% والهامش: 10 بكسل، على سبيل المثال، أصبحت العناصر المرنة الآن ملائمة كما هو متوقع.