CSS align-content: flex-start - फ्लेक्स लाइन्स को शुरुआत में संरेखित करें

align-content: flex-start मल्टी-लाइन फ्लेक्स कंटेनर में सभी फ्लेक्स लाइन्स को क्रॉस-एक्सिस की शुरुआत (start) में पैक करता है। Row दिशा में यह लाइन्स को **ऊपर** (टॉप) संरेखित करता है।

उदाहरण: flex-start के साथ लाइन्स शीर्ष पर

कंटेनर की ऊंचाई 200px है। 8 आइटम्स 4 लाइन्स बनाते हैं, सभी लाइन्स कंटेनर के शीर्ष पर पैक होती हैं, नीचे खाली स्थान रहता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: blue;
      align-content: flex-start;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: orange;
      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>

flex-direction के अनुसार flex-start

align-content मान तुलना

flex-start:  | लाइन1 लाइन2 लाइन3 लाइन4 |    (सभी ऊपर)
             |                          |
             |      खाली स्थान         |

center:      |        लाइन1 लाइन2       |    (केंद्र में समूह)
             |        लाइन3 लाइन4       |

flex-end:    |                          |    (सभी नीचे)
             |      खाली स्थान         |
             | लाइन1 लाइन2 लाइन3 लाइन4 |

कब उपयोग करें

• कंटेंट को शीर्ष से शुरू करना हो (डिफ़ॉल्ट जैसा लेकिन स्पष्ट)
• फुटर को नीचे धकेलने के लिए flex-end के साथ संयोजन
• कार्ड ग्रिड जहां शीर्ष संरेखण चाहिए