फ्लेक्स-बॉक्स: लपेटने से पहले संकीर्ण

Question

मेरे पास एकाधिक कॉलम के साथ एक लेआउट है, जिनमें से कुछ निश्चित हैं और अन्य आवश्यकतानुसार फैले हुए हैं। इसलिए, मैं flexbox का उपयोग करें। इसके अतिरिक्त, मैं चाहता हूं और फ्लेक्स-रैप का उपयोग करने की आवश्यकता है।

संरचना इस तरह है:

<div class="row" style="display: flex; flex-flow: row wrap"> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
    <div class="column stretch" style="flex: 1 1 auto"></div> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
</div> 

कृपया देखें http://jsfiddle.net/mh3rypqj/1/

अब सब कुछ के रूप में जब तक हम खाली divs के बारे में बात कर रहे हैं उम्मीद काम करता है। एक बार जब मैं खिंचाव कॉलम में एक पी डालता हूं, तो लपेटना और सिकुड़ना अलग-अलग व्यवहार करता है।

अंतरिक्ष कम होने पर मेरा अपेक्षित व्यवहार: पहले सिकुड़ें, फिर लपेटें। .stretch हटना। एक बार न्यूनतम चौड़ाई तक पहुंचने के बाद, तत्वों को लपेटें।

एक बार जब मैं पी डालता हूं तो व्यवहार मुझे मिलता है। पहले लपेटें, फिर को संक्षिप्त करें। पंक्ति पहले लपेटा गया है। सब कुछ लपेटने के बाद ही हटना होता है।

मैं पहले सिकुड़ना चाहता हूं, फिर लपेटें। संक्षेप में, मैं जेएसफ़िल्ड में दूसरी पंक्ति को पहले की तरह व्यवहार करना चाहता हूं। मुझे क्या करना होगा?

Answer 1

सेट flex-basis बराबर min-width रहे हैं:

.column.stretch { 
    flex: 1 1 100px; /* or 1 0 100px, and no more need in min-width at all */ 
    max-width: 300px; 
    min-width: 100px; 
    background: red; 
} 

edited JSfiddle example

Answer 2

फ्लेक्स प्रवाह का उपयोग करते समय ही कभी सिकुड़ बाद फ्लेक्स-आधार आकार तक पहुँच जाता है होता है। तो फ्लेक्स-आधार सेट करना: ऊपर सुझाए गए अनुसार 100 पीएक्स का मतलब है कि आप चाहते हैं कि लाइन को रैपिंग शुरू करना पड़े, जब उस कॉलम के 100 पीएक्स आधार सहित सभी वस्तुओं के लिए पर्याप्त जगह न हो। एक बार कमरा खत्म हो जाने पर, आइटम एक नई लाइन पर लपेट जाएंगे। जब अंतरिक्ष फिर से बाहर चला जाता है, तो एक नई लाइन बन जाएगी। यह तब तक जारी रहता है जब तक प्रत्येक आइटम की अपनी रेखा न हो। केवल तभी - यदि अभी भी आधार के लिए स्थान नहीं है - क्या आइटम घटने लगेंगे।

सामग्री के अनुच्छेद के साथ आप एक अंतर देख रहे हैं क्योंकि आप स्पष्ट रूप से एक फ्लेक्स-आधार निर्धारित नहीं कर रहे हैं। यदि फ्लेक्स-आधार ऑटो पर सेट किया गया है, तो यह आइटम की चौड़ाई पर गिर जाएगी। यदि चौड़ाई सेट नहीं की जाती है, तो आधार सामग्री और सामग्री के बाद आधार के आकार पर वापस आ जाता है, फिर न्यूनतम और अधिकतम चौड़ाई द्वारा सही किया जाता है। तो इस मामले में 300px क्योंकि आप अधिकतम चौड़ाई निर्धारित करते हैं। ध्यान दें कि यदि आप अधिकतम चौड़ाई को बंद करते हैं तो आइटम को पूर्ण 100% चौड़ाई मिलती है और तुरंत अपनी लाइन पर बह जाती है। फिर जब आप उस पेज का आकार बदलते हैं जो आइटम कम हो जाता है क्योंकि इसकी पहले से ही अपनी लाइन है और उस प्रारंभिक आकार के लिए पर्याप्त जगह नहीं है।

आशा है कि मदद करता है!