6
मैं उस प्रभाव को प्राप्त करने की कोशिश कर रहा हूं जहां "आधे" लेबल वाले बक्से, चौड़ाई का केवल 50% लेते हैं (उर्फ वे समान पंक्ति को समान रूप से साझा करते हैं)।फ्लेक्स कंटेनर में अलग-अलग बच्चों की नियंत्रण चौड़ाई
मूल आवश्यकता यह है कि वे एक कंटेनर में रहते हैं। क्या फ्लेक्सबॉक्स का उपयोग करना संभव है?
मैं flex-grow, flex-shrink, और flex-basis के साथ प्रयोग करना की कोशिश की है, लेकिन मुझे डर है कि मैं समझ नहीं कर रहा हूँ कि यह कैसे काम करने के लिए, या कर रहा हूँ अगर यह एक कंटेनर आवश्यकता को देखते हुए भी संभव हो, है। - flex-grow, flex-shrink, flex-basis और flex - केवल मुख्य धुरी फ्लेक्स कंटेनर के साथ काम http://jsfiddle.net/GyXxT/270/
div {
border: 1px solid;
}
.container {
width: 400px;
display: flex;
flex-direction: column;
}
.child {
height: 200px;
}
.child.half {
flex: 1 1 10em;
color: green;
}
.child:not(.half) {
flex-shrink: 2;
flex-basis: 50%;
color: purple;
}<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>
हालांकि यह सच है तैरने लगते हैं, और कुछ मैं पूरी तरह से अनदेखी की, flexbox दृष्टिकोण के करीब है वांछित प्रभाव। 50% चौड़ाई के साथ, जब स्क्रीन छोटी हो जाती है, तो कुछ बिंदु पर 50% बहुत छोटा होता है। फ्लेक्सबॉक्स दृष्टिकोण दूसरे आइटम को नीचे फिट करता है जब यह फिट नहीं होता है, जो प्रभाव मैं चाहता हूं। आपके दृष्टिकोण को मीडिया-प्रश्नों के साथ उत्तरदायी बनाया जा सकता है लेकिन मेरे लिए flexbox पर्याप्त है। धन्यवाद, – parliament
@parliament बेशक, और धन्यवाद ... नोट, 'आधा' तत्व देकर एक न्यूनतम चौड़ाई वही करेगी ... और एक मीडिया क्वेरी के साथ संयुक्त, जो दोनों समाधानों की आवश्यकता है, आप उन्हें प्राप्त कर सकते हैं जब लपेटा जाता है तो सब कुछ पूरा हो जाता है – LGSon