flex-grow गुण
flex-grow गुण यह निर्धारित करता है कि,
जरूरत पड़ने पर एक अलग flex ब्लॉक
पड़ोसी तत्वों से कितना बड़ा हो सकता है।
उदाहरण के लिए, यदि flex-कंटेनर के अंदर सभी flex-ब्लॉक
में flex-grow:1 है, तो वे समान आकार के
होंगे। यदि उनमें से एक में flex-grow:2 है,
तो वह बाकी सभी से 2 गुना बड़ा होगा।
यदि तत्वों की कुल चौड़ाई
माता-पिता की चौड़ाई से कम है, इसलिए दाईं ओर खाली
जगह बची रहती है। इच्छानुसार इस खाली जगह को
हमारे तत्वों के बीच आनुपातिक रूप से बांटा जा सकता है।
यह flex-grow गुण का उपयोग करके किया जाता है,
जो फ्लेक्स-तत्वों को दिया जाता है। इस गुण का
मान एक आयामहीन संख्या है।
लागू होता है: एक विशिष्ट flex ब्लॉक पर।
यह गुण संक्षिप्त गुण
flex के एक घटक भाग के रूप में शामिल है।
सिंटैक्स
चयनकर्ता {
flex-grow: धनात्मक संख्या;
}
डिफ़ॉल्ट मान: 0।
उदाहरण
अभी हमारे पास दो फ्लेक्स-ब्लॉक हैं जिनकी चौड़ाई
100px है। तत्वों की कुल चौड़ाई
200px है, और माता-पिता की चौड़ाई - 300px है।
इसका मतलब है कि 100px की खाली जगह
बची रहती है।
यदि तत्वों को flex-grow नहीं दिया गया है,
तो हम बस यह खाली जगह देखेंगे।
यदि उन्हें दिया गया है, तो तत्वों की वास्तविक चौड़ाई
दी गई चौड़ाई से अधिक होगी - वे आनुपातिक रूप से
खाली जगह को आपस में बांट लेंगे
और इसे अपनी चौड़ाई में जोड़ लेंगे।
उदाहरण के लिए मान लीजिए कि पहले तत्व का flex-grow
1 के बराबर है, और दूसरे का - 3। आइए
गणना करें कि प्रत्येक तत्व को खाली जगह का कितना हिस्सा
मिलेगा।
सबसे पहले हमारे सभी तत्वों के
flex-grow इकाइयों की कुल संख्या प्राप्त करनी होगी।
पहले तत्व का यह 1 है, और
दूसरे का - 3। इसका मतलब है कि कुल
यह 4 के बराबर है।
अब 100px खाली जगह को
4 से विभाजित करें और हमें मिलता है कि 25px प्रति
flex-grow इकाई है। इसका मतलब यह हुआ,
कि पहले तत्व में एक इकाई
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-direction,
जो flex ब्लॉकों के अक्षों की दिशा निर्धारित करता है -
गुण
justify-content,
जो मुख्य अक्ष के साथ संरेखण निर्धारित करता है -
गुण
align-items,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करता है -
गुण
flex-wrap,
जो flex ब्लॉकों की बहु-पंक्ति को निर्धारित करता है -
गुण
flex-flow,
flex-direction और flex-wrap के लिए संक्षिप्त रूप -
गुण
order,
जो flex ब्लॉकों का क्रम निर्धारित करता है -
गुण
align-self,
जो एक ब्लॉक का संरेखण निर्धारित करता है -
गुण
flex-basis,
जो एक विशिष्ट flex ब्लॉक का आकार निर्धारित करता है -
गुण
flex-shrink,
जो flex ब्लॉकों के संकुचन को निर्धारित करता है -
गुण
flex,
flex-grow, flex-shrink और flex-basis के लिए संक्षिप्त रूप
