CSS align-items: flex-end - फ्लेक्स आइटम्स को नीचे संरेखित करें

align-items: flex-end फ्लेक्स आइटम्स को क्रॉस-एक्सिस के अंत (end) में संरेखित करता है। Row दिशा में यह आइटम्स को **नीचे** (बॉटम) संरेखित करता है।

उदाहरण: flex-end के साथ बॉटम संरेखण

कंटेनर की ऊंचाई 300px है। सभी आइटम्स नीचे संरेखित हैं, उनकी मूल ऊंचाई (60px) बनी रहती है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;
      background-color: red;
      align-items: flex-end;  /* आइटम्स नीचे संरेखित */
      gap: 10px;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: orange;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      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>

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

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

.footer {
  display: flex;
  align-items: flex-end;  /* फुटर एलिमेंट्स को नीचे संरेखित */
  min-height: 100px;
}

.form-row {
  display: flex;
  align-items: flex-end;  /* लेबल और इनपुट बेसलाइन पर */
}
.form-row label {
  margin-bottom: 5px;
}