CSS align-content: stretch - फ्लेक्स लाइन्स को फैलाएं

align-content: stretch (डिफ़ॉल्ट मान) मल्टी-लाइन फ्लेक्स कंटेनर में फ्लेक्स लाइन्स को क्रॉस-एक्सिस पर कंटेनर की पूरी ऊंचाई भरने के लिए फैलाता है। प्रत्येक लाइन समान ऊंचाई पाती है।

उदाहरण: stretch के साथ फ्लेक्स लाइन्स फैलाई गईं

कंटेनर की ऊंचाई 200px है। 8 आइटम्स 2-2 की 4 लाइन्स बनाते हैं। प्रत्येक लाइन को 50px (200/4) ऊंचाई मिलती है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: red;
      align-content: stretch;  /* डिफ़ॉल्ट */
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: yellow;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>क्यू (Queue)</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
  </div></body></html>

stretch कैसे काम करता है

1. कंटेनर की क्रॉस-एक्सिस आकार (ऊंचाई row के लिए) लें
2. फ्लेक्स लाइन्स की संख्या से विभाजित करें
3. प्रत्येक लाइन को वह ऊंचाई दें (मार्जिन/पैडिंग सहित)
4. आइटम्स जिनकी align-self: stretch है (डिफ़ॉल्ट), लाइन भरते हैं

stretch रोकने के लिए

.mycontainer {
  align-content: flex-start;  /* या center, flex-end, space-between, आदि */
}

/* या कंटेनर की ऊंचाई ऑटो रखें */
.mycontainer {
  height: auto;  /* stretch का कोई प्रभाव नहीं */
}

व्यावहारिक: समान ऊंचाई वाली कार्ड पंक्तियाँ

.card-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;  /* डिफ़ॉल्ट, सभी पंक्तियाँ समान ऊंचाई */
  min-height: 500px;
}
.card {
  display: flex;
  flex-direction: column;
  /* कार्ड कंटेंट पंक्ति ऊंचाई भरता है */
}