CSS flex-grow प्रॉपर्टी - फ्लेक्स आइटम का आकार बढ़ाएं

flex-grow प्रॉपर्टी निर्धारित करती है कि फ्लेक्स आइटम उपलब्ध अतिरिक्त स्थान (free space) का कितना हिस्सा लेगा। मान एक संख्या (यूनिटलेस) होती है जो अनुपात दर्शाती है।

उदाहरण: Q3 को अन्य आइटम्स से बड़ा बनाना

Q3 का flex-grow: 20 है, जबकि अन्य का flex-grow: 1 है। Q3 को 20 गुना अधिक स्थान मिलेगा।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      align-content: space-between;
      gap: 10px;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>क्विज़</h1>
  <div class="mycontainer">
    <div style="flex-grow: 1">Q1</div>
    <div style="flex-grow: 1">Q2</div>
    <div style="flex-grow: 20">Q3</div>  <!-- 20 गुना अधिक स्थान -->
    <div style="flex-grow: 1">Q4</div>
    <div style="flex-grow: 1">Q5</div>
  </div>
</body>
</html>

flex-grow कैसे काम करता है

1. सभी आइटम्स का flex-grow योग निकालें (1+1+20+1+1 = 24)
2. उपलब्ध अतिरिक्त स्थान को इस योग से विभाजित करें
3. प्रत्येक आइटम को उसके flex-grow मान के अनुपात में स्थान मिलता है

सामान्य पैटर्न

/* समान रूप से बढ़ें */
.item { flex-grow: 1; }

/* मुख्य कंटेंट अधिक स्थान ले */
.main-content { flex-grow: 3; }
.sidebar { flex-grow: 1; }

/* बढ़ने न दें */
.fixed-size { flex-grow: 0; }

शॉर्टहैंड: flex

/* flex-grow | flex-shrink | flex-basis */
flex: 1 1 auto;    /* डिफ़ॉल्ट */
flex: 2 0 300px;   /* flex-grow: 2, flex-shrink: 0, flex-basis: 300px */