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