CSS में फ्लेक्स एलिमेंट्स की लालच

मान लीजिए कि अभी हमारे पास एक पंक्ति में व्यवस्थित दो फ्लेक्स-ब्लॉक हैं। इन ब्लॉक्स की चौड़ाई 100px निर्धारित है, और उनके पैरेंट की - 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

जैसा कि आप देख रहे हैं, हमारे एलिमेंट्स की कुल चौड़ाई पैरेंट की चौड़ाई से कम है, इसलिए दाईं ओर खाली जगह बची रहती है।

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

आइए व्यवहार में देखें कि यह प्रॉपर्टी कैसे काम करती है।

उदाहरण

अभी हमारे पास 100px चौड़ाई वाले दो फ्लेक्स-ब्लॉक हैं। एलिमेंट्स की कुल चौड़ाई 200px है, और पैरेंट की चौड़ाई - 300px। इसका मतलब है कि 100px की खाली जगह बचती है।

यदि एलिमेंट्स को flex-grow नहीं दिया गया है, तो हम बस इस खाली जगह को देखेंगे। यदि यह उन्हें दिया गया है, तो एलिमेंट्स की वास्तविक चौड़ाई निर्धारित चौड़ाई से अधिक होगी - वे आपस में खाली जगह को आनुपातिक रूप से बांट लेंगे और इसे अपनी चौड़ाई में जोड़ लेंगे।

उदाहरण के लिए मान लीजिए कि पहले एलिमेंट का flex-grow 1 के बराबर है, और दूसरे का - 3। आइए गणना करें कि प्रत्येक एलिमेंट को खाली जगह का कितना हिस्सा मिलेगा।

सबसे पहले हमारे सभी एलिमेंट्स के flex-grow की कुल इकाइयाँ प्राप्त करनी होंगी। पहले एलिमेंट का यह 1 है, और दूसरे का - 3। इसका मतलब है कि कुल मिलाकर यह 4 के बराबर है।

अब 100px खाली जगह को 4 से विभाजित करें और पाएं कि flex-grow की एक इकाई पर 25px आता है। इसका मतलब हुआ कि पहले एलिमेंट में flex-grow की एक इकाई जुड़ जाएगी, यानी 25px, और दूसरे में - तीन इकाइयाँ, यानी 75px।

पहले एलिमेंट की चौड़ाई 125px होगी, और दूसरे की - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

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

उदाहरण

मान लीजिए कि अब पैरेंट की चौड़ाई 400px के बराबर है, पहले एलिमेंट की चौड़ाई 200px है, और दूसरे एलिमेंट की चौड़ाई - 100px। इसका मतलब, कि खाली जगह फिर से 100px के बराबर है।

आइए प्रत्येक एलिमेंट को flex-grow दें, जो 1 के बराबर है। कुल मिलाकर 2 होगा, यानी 100px खाली जगह को 2 से विभाजित करने की आवश्यकता है। इसका मतलब होगा कि लालच की एक इकाई पर 50px आता है।

चूंकि सभी एलिमेंट्स के flex-grow का मान समान है, इसलिए सभी एलिमेंट्स में 50px का समान मान जुड़ जाएगा। इसका मतलब है, कि पहला एलिमेंट 250px हो जाएगा, और दूसरा 150px हो जाएगा:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

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

उदाहरण

मान लीजिए फिर से पैरेंट की चौड़ाई 400px के बराबर है, पहले एलिमेंट की चौड़ाई 200px है, और दूसरे एलिमेंट की चौड़ाई - 100px।

आइए अब पहले एलिमेंट का flex-grow 3 मान पर सेट करें, और दूसरे को - 1 मान पर। इसका मतलब होगा कि लालच कुल मिलाकर 4 के बराबर है। तब लालच की एक इकाई 100px / 4 = 25px के बराबर होगी।

पहले एलिमेंट में 75px जुड़ जाएगा, और यह 275px हो जाएगा, और दूसरे में - 25px, यह 125px हो जाएगा:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

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

प्रायोगिक कार्य

नीचे दिए गए सभी कार्यों में आपको कुछ कोड दिखाया जाएगा जिसमें फ्लेक्स-एलिमेंट्स होंगे जिनकी चौड़ाई और 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: 3;
}
.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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 200px;
	flex-grow: 3;
}

<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: 100px;
	flex-grow: 1;
}
.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 class="child elem4">4</div>
</div>

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