CSS align-items प्रॉपर्टी - फ्लेक्स आइटम्स का क्रॉस-एक्सिस संरेखण

align-items प्रॉपर्टी फ्लेक्स कंटेनर में सभी फ्लेक्स आइटम्स के क्रॉस-एक्सिस (लंबवत अक्ष) पर संरेखण को नियंत्रित करती है। यह सिंगल-लाइन फ्लेक्स कंटेनर के लिए काम करती है।

उदाहरण: align-items: center

कंटेनर की निश्चित ऊंचाई (150px) है, और आइटम्स को align-items: center से वर्टिकली केंद्र में संरेखित किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      align-items: center;
      height: 150px;
      width: 600px;
      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>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

align-items के मान

align-items vs align-content

• align-items: सिंगल लाइन में आइटम्स का संरेखण
• align-content: मल्टी-लाइन (flex-wrap: wrap) में लाइन्स का संरेखण

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

.navbar {
  display: flex;
  align-items: center;  /* लोगो, लिंक्स, बटन सभी वर्टिकली केंद्र में */
  height: 60px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* सभी चाइल्ड समान चौड़ाई */
}