CSS align-items: flex-start से फ्लेक्स आइटम्स को शीर्ष पर संरेखित करें

CSS align-items प्रॉपर्टी का flex-start मान फ्लेक्स कंटेनर में फ्लेक्स आइटम्स को क्रॉस अक्ष की शुरुआत (टॉप, जब flex-direction: row हो) पर संरेखित करता है। यह सिंगल-लाइन फ्लेक्स कंटेनर के लिए काम करता है।

उदाहरण

नीचे दिए गए उदाहरण में, align-items: flex-start का उपयोग करके फ्लेक्स आइटम्स को कंटेनर के शीर्ष पर संरेखित किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;
      background-color: red;
      align-items: flex-start;
    }
    .mycontainer > div {
      background-color: orange;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

align-items के मान (क्रॉस अक्ष संरेखण):

• stretch (डिफ़ॉल्ट): आइटम्स खिंचकर कंटेनर भरते हैं
• flex-start: क्रॉस-स्टार्ट पर (रो के लिए टॉप)
• flex-end: क्रॉस-एंड पर (रो के लिए बॉटम)
• center: क्रॉस अक्ष पर केंद्रित
• baseline: बेसलाइन पर संरेखित

व्यक्तिगत ओवरराइड: किसी एक आइटम के लिए align-self प्रॉपर्टी का उपयोग करें।