एक फ्लेक्स आइटम कैसे फ्लेक्स कंटेनर की ऊंचाई को भरने के लिए?

Question

जैसा कि आप नीचे दिए गए कोड में देख सकते हैं, फ्लेक्स कंटेनर के अंदर बायां div दाएं div की ऊंचाई को पूरा करने के लिए फैला है। क्या कोई विशेषता है जो मैं अपनी सामग्री को अपनी सामग्री रखने के लिए न्यूनतम आवश्यक बनाने के लिए सेट कर सकता हूं (जैसे सामान्य height: auto फ्लेक्स कंटेनर के बाहर divs)?

#a { 
 
    display: flex; 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
</div>

Answer 1

align-items, या क्रमशः align-content विशेषता इस व्यवहार को नियंत्रित करता है।

align-items आइटम flex-direction के लंबवत स्थिति, डिफ़ॉल्ट flex-directionrow है, therfore खड़ी नियुक्ति align-items साथ नियंत्रित किया जा सकता परिभाषित करता है। प्रति आइटम आधार पर संरेखण को नियंत्रित करने के लिए align-self विशेषता भी है।

#a { 
 
    display:flex; 
 

 
    align-items:flex-start; 
 
    align-content:flex-start; 
 
    } 
 

 
#a > div { 
 
    
 
    background-color:red; 
 
    padding:5px; 
 
    margin:2px; 
 
    } 
 
#a > #c { 
 
    align-self:stretch; 
 
}

<div id="a"> 
 
    
 
    <div id="b">left</div> 
 
    <div id="c">middle</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
    
 
</div>

सीएसएस-चाल विषय पर एक उत्कृष्ट article है। मैं इसे दो बार पढ़ने की सलाह देते हैं।

Answer 2

जब आप एक फ्लेक्स कंटेनर बनाते हैं तो विभिन्न डिफ़ॉल्ट फ्लेक्स नियम खेलते हैं।

इनमें से दो डिफ़ॉल्ट नियम flex-direction: row और align-items: stretch हैं। इसका मतलब है कि फ्लेक्स आइटम स्वचालित रूप से एक पंक्ति में संरेखित हो जाएंगे, और प्रत्येक आइटम कंटेनर की ऊंचाई को भर देगा।

आप – फैलाने के लिए यानी, आप की तरह लिखा फ्लेक्स आइटम नहीं करना चाहते हैं: बस

इसकी ऊंचाई कम से कम अपनी सामग्री

आयोजित करने के लिए आवश्यक बनाने के ... तो align-items: flex-start के साथ डिफ़ॉल्ट को ओवरराइड करें।

#a { 
 
    display: flex; 
 
    align-items: flex-start; /* NEW */ 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div> 
 
    right<br>right<br>right<br>right<br>right<br> 
 
    </div> 
 
</div>

यहाँ flexbox spec कि align-items और कैसे वे कंटेनर के भीतर फ्लेक्स आइटम की स्थिति के लिए पांच मूल्यों पर प्रकाश डाला गया से एक उदाहरण है। जैसा कि पहले उल्लेख किया गया है, stretch डिफ़ॉल्ट मान है।

^{स्रोत: W3C}