css - सीएसएस flexbox में लपेटने के बाद एक तत्व निर्दिष्ट करने के लिए कैसे?



css3 (4)

आप कंटेनर पर इसे सेट करके इसे पूरा कर सकते हैं:

ul {
    display: flex;
    flex-wrap: wrap;
}

और बच्चे पर आप इसे सेट करते हैं:

li:nth-child(2n) {
    flex-basis: 100%;
}

इससे बच्चे को किसी भी अन्य गणना से पहले 100% कंटेनर चौड़ाई बनाने का कारण बनता है। चूंकि कंटेनर को तोड़ने के लिए सेट किया गया है क्योंकि पर्याप्त जगह नहीं है, यह इस बच्चे के पहले और बाद में ऐसा करता है।

https://src-bin.com

मुझे नहीं लगता कि यह अभी तक फ्लेक्सबॉक्स मानक का हिस्सा है, लेकिन क्या एक निश्चित तत्व के बाद लपेटने या मजबूर करने के लिए शायद एक चाल है? मैं अलग-अलग पेज आकारों का जवाब देना चाहता हूं और अतिरिक्त मार्कअप के बिना अलग-अलग सूची को लपेटना चाहता हूं, ताकि अगली पंक्ति पर अनाथ मेनू आइटम (उदाहरण के लिए) के बजाय, मैं मेनू के बीच में टूट जाए।

यहां प्रारंभिक एचटीएमएल है:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

और सीएसएस:

ul {
    display: flex;
    flex-wrap: wrap;
}

मुझे कुछ पसंद है:

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

अधिक पूर्ण सेटअप के लिए jsfiddle देखें: http://jsfiddle.net/theazureshadow/ww8DR/


Answer #1

उस spec का एक हिस्सा है जो निश्चित रूप से इस तरह लगता है ... सही "फ्लेक्स लेआउट एल्गोरिदम" और "मुख्य आकार" खंडों में:

अन्यथा, पहले uncollected आइटम से शुरू, लगातार आइटम एक-एक करके इकट्ठा करें जब तक कि अगली एकत्रित वस्तु फ्लेक्स कंटेनर के आंतरिक मुख्य आकार में फिट न हो, या जब तक मजबूर ब्रेक का सामना न हो जाए। यदि पहली बार अनोखा आइटम फिट नहीं होगा, तो इसे लाइन में इकट्ठा करें। सीएसएस 2.1 पृष्ठ-ब्रेक-पहले / पृष्ठ-ब्रेक-बाद [सीएसएस 21] या CSS3 ब्रेक-पहले / ब्रेक-बाद [CSS3-BREAK] गुणों के बाद एक ब्रेक को मजबूर किया जाता है, एक विखंडन ब्रेक निर्दिष्ट करता है।

http://www.w3.org/TR/css-flexbox-1/#main-sizing

यह निश्चित रूप से लगता है (इस तथ्य से अलग कि पृष्ठ-ब्रेक प्रिंटिंग के लिए होना चाहिए), संभावित रूप से बहु-लाइन फ्लेक्स लेआउट डालने पर (जिसे मैं spec के किसी अन्य भाग से लेता हूं वह flex-wrap: nowrap बिना होता है flex-wrap: nowrap ) page-break-after: always या break-after: always ब्रेक का कारण break-after: always चाहिए , या अगली पंक्ति में लपेटना चाहिए

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.child {
  flex-grow: 1;
}

.child.break-here {
  page-break-after: always;
  break-after: always;
}

हालांकि, मैंने यह कोशिश की है और इसे इस तरह से लागू नहीं किया गया है ...

  • सफारी (7 तक)
  • क्रोम (43 देव तक)
  • ओपेरा (28 देव और 12.16 तक)
  • आईई (11 तक)

यह जिस तरह से लगता है (मेरे लिए, कम से कम) काम करता है जैसे:

  • फ़ायरफ़ॉक्स (28+)

http://codepen.io/morewry/pen/JoVmVj पर नमूना।

मुझे बग ट्रैकर में कोई अन्य अनुरोध नहीं मिला, इसलिए मैंने इसे https://code.google.com/p/chromium/issues/detail?id=473481 पर रिपोर्ट किया।

लेकिन विषय मेलिंग सूची में ले गया और, चाहे वह कैसा लगता है, यह स्पष्ट रूप से वे इंगित करने के लिए नहीं था, सिवाय इसके कि मुझे अंकन के लिए अनुमान लगाया गया है। तो फ्लेक्स लेआउट में किसी विशेष बॉक्स के पहले या बाद में फ्लेक्स बच्चों के अंदर लगातार फ्लेक्स लेआउट घोंसले या विशिष्ट चौड़ाई (जैसे flex-basis: 100% ) के साथ झुकाव के बिना लपेटने का कोई तरीका नहीं है।

यह निश्चित रूप से गहराई से परेशान है, क्योंकि फ़ायरफ़ॉक्स कार्यान्वयन के साथ काम करने से मेरा संदेह है कि कार्यक्षमता अविश्वसनीय रूप से उपयोगी है। बेहतर वर्टिकल संरेखण के अलावा, कमी कई परिदृश्यों में फ्लेक्स लेआउट की उपयोगिता का एक अच्छा सौदा करती है। उस बिंदु को नियंत्रित करने के लिए नेस्टेड फ्लेक्स लेआउट के साथ अतिरिक्त रैपिंग टैग जोड़ने के लिए जिस पर एक पंक्ति लपेटती है, HTML और CSS दोनों की जटिलता को बढ़ाती है और, दुख की बात है, अक्सर बेकार order प्रदान करती है। इसी प्रकार, किसी आइटम की चौड़ाई को 100% तक मजबूर करने के लिए फ्लेक्स लेआउट की "उत्तरदायी" क्षमता को कम कर देता है या बहुत अधिक विशिष्ट प्रश्नों की आवश्यकता होती है या चयनकर्ताओं की गणना की आवश्यकता होती है (उदाहरण के लिए जो सामान्य परिणाम पूरा कर सकते हैं, उन्हें दूसरे में वर्णित किया गया है जवाब)।

कम से कम फ्लोट clear था। इसके लिए किसी बिंदु या किसी अन्य पर कुछ जोड़ा जा सकता है, एक उम्मीद है।


Answer #2

बाल तत्वों पर एक न्यूनतम चौड़ाई निर्धारित करने से ब्रेकपॉइंट भी बन जाएगा। उदाहरण के लिए हर 3 तत्वों को तोड़ना,

flex-grow: 1;
min-width: 33%; 

यदि 4 तत्व हैं, तो इसमें चौथा तत्व लपेटने वाला पूर्ण 100% होगा। यदि 5 तत्व हैं, तो चौथा और 5 वां तत्व लपेटेंगे और प्रत्येक 50% लेंगे।

सुनिश्चित करें कि मूल तत्व होना चाहिए,

flex-wrap: wrap

Answer #3

मुझे नहीं लगता कि आप एक विशिष्ट आइटम के बाद तोड़ सकते हैं। सबसे अच्छा आप संभवतः अपने ब्रेकपॉइंट्स पर फ्लेक्स-आधार बदल सकते हैं। इसलिए:

ul {
  flex-flow: row wrap;
  display: flex;
}

li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

@media (min-width: 40em;){
li {
  flex-basis: 30%;
}

यहां एक नमूना है: http://cdpn.io/ndCzD

============================================

संपादित करें: आप एक विशिष्ट तत्व के बाद तोड़ सकते हैं! हेडॉन पिकरिंग ने एक ए सूची में कुछ सीएसएस जादूगर को छेड़छाड़ की अतिरिक्त लेख: http://alistapart.com/article/quantity-queries-for-css

संपादित करें 2: कृपया इस उत्तर पर एक नज़र डालें: .com/questions/29732575/…

@luksak भी एक महान जवाब प्रदान करता है





flexbox