क्या मैं सीएसएस फ्लेक्सबॉक्स के साथ सभी वस्तुओं को लपेटने के लिए मजबूर कर सकता हूं?

Question

मेरे पास तीन ब्लॉक तत्व हैं जिन्हें मैं सीएसएस फ्लेक्सबॉक्स के साथ बिछा रहा हूं। (मेरे मामले में, वे एक <div>ider तत्व के दोनों तरफ दो <select>s होने के लिए होता है, मैं एक सूची बिल्डर नियंत्रण का निर्माण कर रहा हूँ।)

क्या मैं चाहता हूँ है: (

• बीच करवाने के लिए विभक्त) तत्व संभवतः न्यूनतम स्थान की जगह ले लेता है।
• किसी भी अंत (यानी: चयन नियंत्रण) पर तत्व रखने के लिए न्यूनतम चौड़ाई है, और संभव स्थान भरने के लिए बढ़ती है।
• करवाने के लिए सभी तत्वों खड़ी लपेट, जब पर्याप्त क्षैतिज उन सब को क्षैतिज स्थिति रिक्त स्थान नहीं:
• वहाँ जब कंटेनर (ब्राउज़र चौड़ाई पूर्व) में पर्याप्त क्षैतिज स्थान एक पंक्ति में सभी तीन तत्वों करवाने के लिए।

flexbox इन बातों के सभी का एक अद्भुत काम, पिछले आवश्यकता के लिए छोड़कर करता है। मैं सभी को तत्वों के लपेटने के लिए मजबूर नहीं कर सकता हूं यदि उनमें से सभी को एक पंक्ति पर पर्याप्त स्थान से कम किया गया हो।

मैं एक काफी सरल flexbox सेटअप का उपयोग कर रहा लेआउट प्राप्त करने के लिए:

.container { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    align-items: center; 
} 

select { 
    flex-basis: 10em; 
    flex-grow: 1; 
} 

.divider { 
    flex-basis: 3em; 
    flex-grow: 0; 
    text-align: center; 
} 

इस के साथ समस्या यह है कि, कंटेनर चौड़ाई किसी भी राशि एक का चयन प्लस विभक्त के लिए पर्याप्त विस्तृत है कि करने के लिए सेट किया गया है , यह अंत चयन को लपेट देगा, लेकिन विभाजक नहीं। मुझे एक लाइन पर एक प्लस एक डिवाइडर मिलेगा, जो बदसूरत दिखता है।

http://jsfiddle.net/5s0yf74w/1/

यह सीएसएस में सुधार करने, जबकि सामान्य flexbox लेआउट को बनाए रखना द्वारा अपने वांछित परिणाम प्राप्त करना संभव है:

इस बेला मुद्दे को दर्शाता है?

Answer 1

मुझे नहीं लगता कि जेएस आधारित पुनरावर्तक लेआउट तर्क के बिना आप जो चाहते हैं वह संभव है (आप जानते हैं, ब्राउजर प्रस्तुत करना, चौड़ाई की गणना करना और सशर्त रूप से कक्षाओं को जोड़ना/निकालना)। मुझे लगता है कि this fiddle में दिया गया समाधान केवल एक सीएसएस सीएसएस है। मूल रूप से दो लेआउट हैं, चौड़ा एक जहां मैंने केवल उस खराब मामले को रोकने के लिए flex-wrap: nowrap; को एक बदलाव किया है, जहां आप वर्णन करते हैं कि सभी तीन तत्व लपेटे नहीं गए हैं। और संकीर्ण एक जो फ्लेक्स-दिशा को flex-direction: column; पर ओवरराइड करता है। दोनों को आसानी से एक सिन min-width के साथ उचित मीडिया-क्वेरी लगाने के साथ स्विच किया जा सकता है।

Answer 2

बिल्कुल वही नहीं जो आप पूछ रहे हैं, लेकिन (हो सकता है) और भी बेहतर। आप इसे किसी भी विभक्त के बिना सेट कर सकते हैं।जब जरूरत आप विभक्त का भ्रम मिल जाएगा, लेकिन कोई विभक्त जब नहीं

#wide { 
 
    width: 31em; 
 
} 
 
#narrow { 
 
    width: 10em; 
 
    top: 100px; 
 
} 
 

 

 
.container { 
 
    position: absolute; 
 
    border: solid red 1px; 
 
    background-image: radial-gradient(circle at center, blue 5px, transparent 5px); 
 
} 
 
.fakecontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    margin-right: -1em; 
 
} 
 

 
select { 
 
    flex-basis: 11em; 
 
    flex-grow: 1; 
 
    
 
    margin-right: 1em; 
 
} 
 

 
select:nth-child (2) { 
 
    flex-basis: 10em; 
 
    
 
}

<div class="container" id="wide"> 
 
<div class="fakecontainer"> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
</div> 
 
</div> 
 
<div class="container" id="narrow"> 
 
<div class="fakecontainer"> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
</div> 
 
</div>

तुम बस एक अतिरिक्त तत्व, fakecontainer की जरूरत है, मार्जिन

हैं के साथ कुछ हैक करने के लिए आप वास्तव में संकीर्ण विकल्प में एक विभक्त चाहते हैं, आपको बस नीचे मार्जिन के साथ एक समान चाल करने की आवश्यकता है (अगर यह मामला है तो मुझे बताएं)