2017-04-14 15 views
5

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

मुझे लगता है कि मेरा प्रश्न इस पर उबाल जाता है- क्या फ्लेक्सबॉक्स पता लगा सकता है जब यह लपेटता है? यदि हां, तो क्या मैं इसे सख्ती से सीएसएस के साथ लपेटकर वस्तुओं के क्रम को बदलने के लिए कह सकता हूं?

यहाँ मैं क्या "मीडिया के प्रश्नों का उपयोग कर पूरा करने के लिए कोशिश कर रहा हूँ की एक codepen है।

.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 5px; 
 
    flex-wrap: wrap; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    height: 240px; 
 
    margin: 5px; 
 
    width: 500px; 
 
    order: 0; 
 
} 
 

 
.yellow { 
 
    background-color: yellow; 
 
    margin: 5px; 
 
    height: 240px; 
 
    min-width: 240px; 
 
    max-width: 400px; 
 
    flex: 1; 
 
    order: 1; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
    height: 240px; 
 
    margin: 5px; 
 
    min-width: 350px; 
 
    max-width: 400px; 
 
    flex: 1; 
 
    order: 2; 
 
} 
 

 
@media (max-width:1130px) { 
 
    .yellow { 
 
    order: 4; 
 
    } 
 
}
<div class="wrapper"> 
 
    <div class="red"></div> 
 
    <div class="yellow"></div> 
 
    <div class="blue"></div> 
 
</div>

उत्तर

1

flexbox कर सकते हैं का पता लगाने के लिए जब एक फ्लेक्स आइटम लपेटता?

सं।

सीएसएस में, ब्राउज़र प्रारंभिक कैस्केड पर पृष्ठ प्रस्तुत करने के बाद, जब कोई तत्व लपेटता है तो यह दस्तावेज़ को रीफ्लो नहीं करता है। नतीजतन, माता-पिता तत्व नहीं जानते कि उनके बच्चे कब लपेटते हैं।

यही कारण है कि कंटेनर लपेटने के बाद अपनी सामग्री को कम नहीं करते हैं।

यही कारण है कि आपको मीडिया प्रश्न या जावास्क्रिप्ट की आवश्यकता है।

यहां कुछ और जानकारी कर रहे हैं:

संबंधित मुद्दे