लंबवत विस्तार किए बिना बहु-कॉलम लेआउट बनाने के लिए css3 flexbox का उपयोग कैसे करें?

Question

मैं क्रोम में सीएसएस 3 के फ्लेक्सबॉक्स के साथ खेल रहा हूं (इसके लिए क्रॉस-ब्राउजर के बारे में चिंता करने की आवश्यकता नहीं है)। मुझे अपनी सामग्री को जिस तरह से पसंद करना है, उसे समझने में कठिनाई हो रही है। यह बजाय प्रत्येक .group को छोड़कर महान काम करने के लिए उसकी ऊंचाई का विस्तार होगा एकाधिक स्तंभों बनाने लगता है http://jsfiddle.net/Yht4V/2/: यहाँ मेरा लक्ष्य का चित्र है:

यहाँ मेरी प्रयास का jsFiddle है।

मैं यहां पर flexbox का उपयोग कर रहा हूं। body लंबवत रूप से बताता है, #content div पृष्ठ की शेष ऊंचाई लेते हुए। प्रत्येक .group क्षैतिज रूप से रखा गया है। अंत में, प्रत्येक .item को .group रैपिंग के साथ लंबवत रूप से रखा गया है।

दुर्भाग्यवश, प्रत्येक .group#content ऊंचाई का विस्तार करके एक कॉलम के रूप में समाप्त होता है, जो लंबवत स्क्रॉलबार (अवांछित) का कारण बनता है। यदि मैं प्रत्येक .group की एक निश्चित पिक्सेल आकार की ऊंचाई निर्धारित करता हूं, तो आइटम कई कॉलम में विभाजित होते हैं, लेकिन यह फ्लेक्सबॉक्स की तरलता को हरा देता है। यह निश्चित ऊंचाई के साथ दिखता है: http://jsfiddle.net/Yht4V/3/

तो, मैं अपने #content div को लंबवत रूप से विस्तारित करने के लिए कैसे प्राप्त कर सकता हूं क्योंकि निश्चित लंबाई निर्धारित किए बिना फ्लेक्सबॉक्स के साथ सब कुछ प्रबंधित किया जाता है? मैं फ्लेक्सबॉक्स को अपने माता-पिता की ऊंचाई बढ़ाने और स्क्रॉलबार के कारण अधिक कॉलम ट्रिगर करने की उम्मीद कर रहा था।

Answer 1

फ्लेक्सबॉक्स के लिए क्रोम और ओपेरा कार्यान्वयन के साथ मैंने जो देखा है, कॉलम के flex-direction को तत्व की ऊंचाई को प्रतिबंधित करने की आवश्यकता है, अन्यथा यह लंबवत रूप से विस्तार जारी रहेगा। यह एक निश्चित मूल्य नहीं होना चाहिए, यह प्रतिशत हो सकता है।

यह कहा गया है कि, आपके .group तत्वों के लिए इच्छित लेआउट सीएसएस कॉलम मॉड्यूल का उपयोग करके भी हासिल किया जा सकता है। तत्वों का प्रवाह फ्लेक्सबॉक्स कॉलम अभिविन्यास के समान होगा, लेकिन यह तब तक कॉलम बनाएगा जब तक कि उनके लिए पर्याप्त चौड़ाई न हो, भले ही दस्तावेज़ कितना समय हो।

http://jsfiddle.net/Yht4V/8/,

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex-grow: 1; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    flex: 1 1 auto; 
} 

#content > .group:first-child { 
    columns: 10em; 
    flex-grow: 2;  
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
    break-inside: avoid; 
} 

#content > .group .item:first-child { 
    margin-top: 0; 
} 

नेस्टेड flexboxes का एक समूह के रूप में यह छोड़कर (आप उपसर्गों की कमी का बहाना करना होगा) इस बारे में के रूप में करीब था के रूप में मैं मिल सकता है यह:

http://jsfiddle.net/Yht4V/9/ (फिर से, कोई उपसर्ग)

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex: 1 1 auto; 
    height: 100%; 
    width: 100%; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 

    display: flex; 
    flex-flow: column wrap; 
    flex: 1 1 30%; 
    max-height: 100%; 
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
} 

Answer 2

अपने सीएसएस में निम्नलिखित बदलें - प्रदर्शन: -webkit-फ्लेक्स ; निम्नलिखित में - डिस्प्ले: -वेबकिट-बॉक्स;

इस पूरी बात चाहे कितना बड़े/छोटे आप विंडो बनाने के तरल पदार्थ होना चाहिए :-)