align-content: space-between मल्टी-लाइन फ्लेक्स कंटेनर में पहली फ्लेक्स लाइन को क्रॉस-एक्सिस की शुरुआत में, अंतिम लाइन को अंत में रखता है, और शेष लाइन्स के बीच समान स्पेस वितरित करता है। किनारों पर कोई अतिरिक्त स्पेस नहीं।
उदाहरण: space-between के साथ फ्लेक्स लाइन्स
कंटेनर की ऊंचाई 200px है। 8 आइटम्स 4 लाइन्स बनाते हैं - पहली लाइन ऊपर, अंतिम नीचे, बीच की दो लाइन्स में समान स्पेस।
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: red;
align-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
.mycontainer > div {
background-color: yellow;
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>space-between vs space-around vs space-evenly
/* 4 लाइन्स, कंटेनर 200px, लाइन ऊंचाई 40px = 160px उपयोग, 40px अतिरिक्त */
space-between: | लाइन1 | | लाइन2 | | लाइन3 | | लाइन4 |
↑ 13.3px ↑ 13.3px ↑ (किनारों पर 0)
space-around: | लाइन1 | लाइन2 | लाइन3 | लाइन4 |
↑ 6.6px ↑ 6.6px ↑ 6.6px ↑ 6.6px ↑ (प्रत्येक के चारों ओर)
space-evenly: | लाइन1 | लाइन2 | लाइन3 | लाइन4 |
↑ 8px ↑ 8px ↑ 8px ↑ 8px ↑ (सभी जगह समान 8px)कब उपयोग करें
space-between: हेडर/फुटर लेआउट, कार्ड ग्रिड जहां किनारे फ्लश होंspace-around: कार्ड ग्रिड जहां किनारों पर भी ब्रीदिंग रूम होspace-evenly: फॉर्म फील्ड्स, बटन टूलबार जहां पूर्ण समानता चाहिए
