फ्लेक्स आइटम मार्जिन और बॉर्डर-बॉक्स साइज़िंग की उपेक्षा करते हुए

फ्लेक्सबॉक्स में, फ्लेक्स सेट करके: 1 1 33.33% और मार्जिन: फ्लेक्स पर 10px आइटम, कोई प्रति पंक्ति तीन बक्सों की अपेक्षा कर सकता है। हालाँकि, फ्लेक्स-रैप: रैप के साथ, बॉक्स प्रति पंक्ति तीन फिट होने के लिए सिकुड़ते नहीं हैं।

इसका कारण बॉक्स-आकार की प्रकृति में निहित है: बॉर्डर-बॉक्स। हालाँकि इस संपत्ति में चौड़ाई और ऊंचाई की गणना में पैडिंग और बॉर्डर शामिल हैं, लेकिन इसमें मार्जिन शामिल नहीं है। मार्जिन की गणना अलग से की जाती है, और डिफ़ॉल्ट रूप से, फ्लेक्स आइटम में फ्लेक्स-सिकुड़ना: 1 होता है, जो उन्हें कंटेनर में फिट होने के लिए सिकुड़ने की अनुमति देता है।

इस समस्या को हल करने के लिए, कोई फ्लेक्स-सेट करके डिफ़ॉल्ट व्यवहार को ओवरराइड कर सकता है। सिकुड़न: 0. यह फ्लेक्स आइटम को मार्जिन में सिकुड़ने से रोकता है।

एक अन्य समाधान फ्लेक्स-ग्रो को बनाए रखते हुए फ्लेक्स-आधार मान को समायोजित करना है: 1. चूँकि मुक्त स्थान की फ्लेक्स-ग्रो खपत के कारण रैप को लागू करने के लिए फ्लेक्स-आधार की कोई आवश्यकता नहीं है, कोई मार्जिन को समायोजित करने के लिए मूल्य को कम कर सकता है। उदाहरण के लिए, फ्लेक्स: 1 1 26% और मार्जिन: 10px सेट करके, फ्लेक्स आइटम अब अपेक्षा के अनुरूप फिट होते हैं।