align-items: stretch (डिफ़ॉल्ट मान) फ्लेक्स आइटम्स को क्रॉस-एक्सिस पर कंटेनर की पूरी ऊंचाई भरने के लिए फैलाता है, जब तक कि आइटम पर क्रॉस-आकार (height/width) स्पष्ट रूप से सेट न हो।
उदाहरण: stretch के साथ फ्लेक्स आइटम्स
कंटेनर की ऊंचाई 200px है। आइटम्स पर कोई ऊंचाई सेट नहीं है, इसलिए वे पूरी 200px ऊंचाई तक फैल जाते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: red;
align-items: stretch; /* डिफ़ॉल्ट, स्पष्ट रूप से दिखाया गया */
gap: 10px;
padding: 10px;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
/* height सेट नहीं - stretch से भर जाएगा */
}
</style>
</head>
<body>
<h1>क्यू (Queue)</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>stretch व्यवहार
- आइटम पर
height(row के लिए) याwidth(column के लिए) **नहीं** सेट हो align-self: stretchआइटम पर न हो (जो डिफ़ॉल्ट है)- मार्जिन और पैडिंग सहित पूरा क्रॉस-आकार भरता है
min-height/max-heightसीमाएं लागू होती हैं
stretch रोकने के लिए
/* आइटम पर निश्चित ऊंचाई सेट करें */
.item {
height: 100px; /* stretch ओवरराइड हो जाता है */
}
/* या align-self बदलें */
.item {
align-self: center; /* या flex-start, flex-end, baseline */
}सामान्य उपयोग मामला
.equal-height-cards {
display: flex;
align-items: stretch; /* सभी कार्ड समान ऊंचाई */
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
background: white;
border-radius: 8px;
padding: 20px;
}