CSS में विभिन्न चौड़ाई वाले एलिमेंट्स और फ्लेक्स ब्लॉक्स की संकुचनशीलता

अब मान लें कि हमारे एलिमेंट्स की चौड़ाई अलग-अलग है। इस स्थिति में, प्रत्येक एलिमेंट से जो हिस्सा काटा जाएगा वह उस एलिमेंट की चौड़ाई के अनुपात में होगा और इसकी गणना निम्नलिखित सूत्र के अनुसार की जाएगी: नकारात्मक मुक्त स्थान * (एलिमेंट की चौड़ाई / सभी एलिमेंट्स की कुल चौड़ाई)।

मान लें कि हमारे पास 4 एलिमेंट हैं। मान लें कि पहले एलिमेंट की चौड़ाई 400px है, शेष एलिमेंट्स की चौड़ाई - 200px, और पैरेंट की चौड़ाई 900px है।

एलिमेंट्स की कुल चौड़ाई बराबर है:

400px + 3 * 200px = 1000px

तब नकारात्मक मुक्त स्थान बराबर होगा:

1000px - 900px = 100px

आइए जानें कि पहले एलिमेंट से कितना काटा जाएगा:

100px * (400px / 1000px) = 40px

यानी उसकी चौड़ाई बराबर होगी:

400px - 40px = 360px

आइए जानें कि शेष प्रत्येक एलिमेंट से कितना काटा जाएगा:

100px * (200px / 1000px) = 20px

यानी इन एलिमेंट्स की चौड़ाई बराबर होगी:

200px - 20px = 180px

वर्णित ब्लॉक्स को लागू करें और माप द्वारा जांचें, कि एलिमेंट्स की चौड़ाई वास्तव में हमारे द्वारा गणना किए गए मान के बराबर है।

ब्लॉक्स की चौड़ाई की गणना करें, और फिर माप द्वारा गणनाओं को जांचें:

<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: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}