CSS में फ्लेक्स एलिमेंट्स की जीरो ग्रीड

अगर किसी एलिमेंट के लिए flex-grow शून्य है, तो यह एलिमेंट खाली जगह के बंटवारे में भाग नहीं लेगा। डिफ़ॉल्ट रूप से ग्रीड का मान शून्य ही होता है और इसलिए बिना flex-grow वाले एलिमेंट आपस में खाली जगह नहीं बांटते।

चलिए उदाहरण के लिए एक गणना करते हैं। मान लीजिए हमारे पास तीन फ्लेक्स-एलिमेंट हैं, जिनमें से प्रत्येक की चौड़ाई 100px है। मान लीजिए पहले एलिमेंट में flex-grow नहीं है (या वह 0 के बराबर है), दूसरे एलिमेंट का flex-grow, 2 है, और तीसरे का - 3 के बराबर है।

मान लीजिए पैरेंट की चौड़ाई 500px है। तब खाली जगह 200px के बराबर होगी, और flex-grow की एक यूनिट के हिस्से में 200px / 5 = 40px आएगा। इस तरह, पहले एलिमेंट की चौड़ाई 100px ही रहेगी, क्योंकि वह बंटवारे में भाग नहीं लेता, दूसरे की चौड़ाई 100px + 2 * 40px = 180px होगी, और तीसरे की - 100px + 3 * 40px = 220px होगी।

प्रैक्टिकल टास्क्स

नीचे दिए गए सभी टास्क्स में आपको कुछ कोड दिखेगा जिसमें फ्लेक्स-एलिमेंट्स हैं जिनकी चौड़ाई और flex-grow सेट है। दिए गए कोड के आधार पर गणना करें कि प्रत्येक एलिमेंट का आकार क्या होगा। फिर कोड रन करें और एलिमेंट्स की असल चौड़ाई नाप कर अपनी गणना की जांच करें।

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

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

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}