CSS align-content से flex-wrap व्यवहार संशोधित करें

align-content प्रॉपर्टी flex-wrap: wrap होने पर फ्लेक्स लाइन्स के संरेखण (alignment) को नियंत्रित करती है। यह फ्लेक्स लाइन्स के बीच और किनारों पर स्पेस वितरण को संशोधित करती है।

उदाहरण: space-between के साथ फ्लेक्स लाइन्स

कंटेनर की निश्चित ऊंचाई (150px) है, और फ्लेक्स लाइन्स को space-between से वितरित किया गया है - पहली लाइन ऊपर, अंतिम लाइन नीचे, बीच की लाइन्स में समान स्पेस।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      align-content: space-between;
      height: 150px;
      width: 600px;
      flex-wrap: wrap;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>क्विज़</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>

align-content vs align-items

व्यावहारिक उपयोग

.card-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;  /* कार्ड्स को ऊपर से शुरू करें */
  min-height: 500px;
}