सीएसएस में फ्लेक्स ब्लॉक्स की संपीडन क्षमता कारक
पिछले पाठ में हमने जाना कि, जब फ्लेक्स तत्वों के लिए जगह कम पड़ती है, तो वे सिकुड़ने लगते हैं। वह, जितनी कुल चौड़ाई माता-पिता की चौड़ाई से अधिक होती है, उसे नकारात्मक मुक्त स्थान कहा जाता है।
तकनीकी रूप से संपीड़न का मतलब है कि प्रत्येक तत्व की चौड़ाई से चौड़ाई का एक टुकड़ा काटा जाता है ताकि सभी तत्व अपने माता-पिता में समा सकें।
आइए कुछ गणना करें। मान लीजिए,
उदाहरण के लिए, हमारे पास 4 तत्व हैं जिनकी चौड़ाई
200px है। मान लें कि इसके साथ ही माता-पिता की चौड़ाई
700px के बराबर है। इसका मतलब है कि तत्वों की कुल
चौड़ाई बराबर है:
200px * 4 = 800px
यह चौड़ाई माता-पिता की चौड़ाई से 100px अधिक है।
आइए गणना करें कि प्रत्येक तत्व से कितना काटना है, ताकि तत्व माता-पिता में समा सकें:
100px / 4 = 25pxयानी तत्वों की चौड़ाई होगी:
200px - 25px = 175pxवर्णित ब्लॉक्स को लागू करें और माप द्वारा जांचें, कि तत्वों की चौड़ाई वास्तव में हमारे द्वारा गणना किए गए मान के बराबर है।
ब्लॉक्स की चौड़ाई की गणना करें, और फिर माप द्वारा गणना की जांच करें:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 200px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
width: 100px;
}
.elem3 {
width: 100px;
}
