flex-grow गुण

flex-grow गुण यह निर्धारित करता है कि, जरूरत पड़ने पर एक अलग flex ब्लॉक पड़ोसी तत्वों से कितना बड़ा हो सकता है।

उदाहरण के लिए, यदि flex-कंटेनर के अंदर सभी flex-ब्लॉक में flex-grow:1 है, तो वे समान आकार के होंगे। यदि उनमें से एक में flex-grow:2 है, तो वह बाकी सभी से 2 गुना बड़ा होगा।

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

लागू होता है: एक विशिष्ट flex ब्लॉक पर।

यह गुण संक्षिप्त गुण flex के एक घटक भाग के रूप में शामिल है।

सिंटैक्स

cssचयनकर्ता {
  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:

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

css.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 हो जाएगा:

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

css.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 हो जाएगा:

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

css.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;
}

Результат:

यह भी देखें