फ्लेक्सबॉक्स मेरी छवि क्यों फैलाता है?

Question

फ्लेक्सबॉक्स में यह व्यवहार है जहां यह छवियों को उनकी प्राकृतिक ऊंचाई तक फैलाता है। अन्य (अधिक विशिष्ट) शब्दों में, यदि मेरे पास एक बच्चे छवि के साथ एक फ्लेक्सबॉक्स कंटेनर है, और मैं उस छवि की चौड़ाई का आकार बदलता हूं, तो ऊंचाई बिल्कुल आकार बदलती नहीं है और छवि फैली हुई है।

<div> 
    <img src="https://loremflickr.com/400/300" > 
    <h4>Appify</h4> 
    <p> some text </p> 
</div> 

और यह स्टाइलशीट

div { 
    display: flex; 
    flex-wrap: wrap; 
} 
img{ 
    width: 50% 
} 

मैं प्रदर्शित करने के लिए मैं क्या मतलब This codepen गयी। इसका कारण क्या है?

Answer 1

यह खींच रहा है क्योंकि align-self डिफ़ॉल्ट मान stretch है। align-selfcenter पर सेट करें।

align-self: center 

यहाँ दस्तावेज़ नहीं देख: align-self

Answer 2

कुंजी align-self: center है:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
img.align-self { 
 
    align-self: center; 
 
}

<div class="container"> 
 
<p>Without align-self:</p> 
 
<img src="http://i.imgur.com/NFBYJ3hs.jpg" /> 
 
<p>With align-self:</p> 
 
<img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" /> 
 
</div>

Answer 3

मैं एक फाउंडेशन मेनू के साथ एक ही मुद्दा सामना करना पड़ा। align-self: center; मेरे लिए काम नहीं किया।

मेरे समाधान एक <div style="display: inline-table;">...</div>