फ्लेक्स कॉलम में समान ऊंचाई फ्लेक्स आइटम

Question

मैं इसे कॉलम में सूचीबद्ध करने की कोशिश कर रहा हूं ताकि कॉलम में उनकी सूची के अंदर समान ऊंचाई हो।

यहाँ मैं क्या है:

<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 

ol { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

ol li { 
    flex: 1; 
} 

मैं कोशिश की है: मैं इस ट्यूटोरियल का पालन करने का प्रयास किया है: कोई लाभ नहीं हुआ https://css-tricks.com/boxes-fill-height-dont-squish/। मुझे लगता है कि परेशानी को के साथ ऊंचाई सेट करने के साथ करना है: HTML पर सभी एकल तत्व तत्वों के लिए 100%। क्या यह सही हो सकता है?

मेरी सूची गहराई से घोंसला है और उन सभी ऊंचाइयों को लेआउट को तोड़ने की सेटिंग है। मैं केवल तरल ऊंचाइयों के साथ काम करना पसंद करूंगा।

मैंने यह भी प्रयास किया है: इसे सूची के बजाय सिर्फ divs के साथ पूरा करना। फिर भी, कोई भाग्य नहीं।

कोई सुराग?

Answer 1

आप फ्लेक्स कंटेनर पर एक प्रतिशत ऊंचाई का उपयोग कर रहे के बाद से ...

ol { min-height: 100%; } 

... आप define a height for the parent and root elements भी की जरूरत है।

एचटीएमएल (कोई बदलाव नहीं)

<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 

सीएसएस

html, body { height: 90%; } /* NEW; needed for child percentage heights to work; 
           set at 90% just for demo purposes */ 
ol { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

ol li { 
    flex: 1; 
} 

डेमो: http://jsfiddle.net/kzL4305k/1/

मैं मुसीबत 0 सेट करने के लिए होने के साथ करना है लगता हैप्रत्येक एकल माता-पिता तत्व HTML पर सभी तरह से। क्या यह सही हो सकता है?

हाँ, यह सही है। यदि आप प्रतिशत ऊंचाई का उपयोग करते हैं तो आपको रूट तत्व (html) तक सभी एकल माता-पिता के लिए ऊंचाई निर्दिष्ट करने की आवश्यकता होती है। मैं इस यहाँ के लिए कारण की व्याख्या की है:

• Working with the CSS height property and percentage values

मेरी सूची में गहराई से नेस्टेड है और उन सभी ऊंचाइयों की स्थापना लेआउट टूट जाता है। मैं केवल तरल ऊंचाइयों के साथ काम करना पसंद करूंगा।

यदि आप प्रतिशत का उपयोग नहीं करते हैं तो आपको मूल तत्वों के लिए ऊंचाई निर्धारित करने की आवश्यकता नहीं है। min-height का उपयोग फ्लेक्स कंटेनर पर पिक्सल में करने का प्रयास करें, फिर flex-grow: 1 फ्लेक्स आइटम के लिए ऊंचाई समस्या से निपटने दें।

Answer 2

बस निम्नलिखित सीएसएस

ol { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: stretch; 
    -webkit-align-items: stretch; 
    -ms-flex-align: stretch; 
    align-items: stretch; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
ol li { 
    background: gold; 
    padding: 5px 5px; 
    margin: 5px 5px; 
    width: 25% 
}