मेरा प्रश्न स्टाइलिंग फ्लेक्स-बॉक्सेस से संबंधित है जो ब्राउजर विंडो की चौड़ाई के आधार पर कई लाइनों में (फ्लेक्स-रैप: रैप;) लपेटता है: क्या कोई विशिष्ट तरीका है, जावास्क्रिप्ट के अलावा, किसी विशिष्ट रेखा को डिज़ाइन करने के लिए?सीएसएस फ्लेक्स बॉक्स --- फ्लेक्स-रैप: लपेटें; एक विशिष्ट रेखा कैसे शैलीबद्ध करें?
हम निम्नलिखित divs
<body>
<div class="flexwrap">
<div class=flexbox"></div>
<div class=flexbox"></div>
<div class=flexbox"></div>
</div>
</body>
और निम्नलिखित स्टाइलशीट
.flexwrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: flex;
box-orient: horizontal;
display: -ms-flexbox;
-ms-flex-direction: row;
flex-wrap: wrap;
}
.flexbox {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
flex-grow:1;
flex-shrink:0;
width:300px;
height:100px;
}
जब ब्राउज़र विंडो की चौड़ाई 900px से अधिक है, वर्ग .flexbox के साथ सभी divs एक में हो जाएगा एक दूसरे के बगल में एक क्षैतिज रेखा। जब ब्राउज़र विंडो की चौड़ाई 900px से कम होती है तो कक्षा के साथ divs। फ्लेक्सबॉक्स ब्राउज़र चौड़ाई पर निर्भर करते हुए 2 या तीन पंक्तियों में जाएगा।
मैं दूसरी पंक्ति में सभी divs शैली बनाना चाहता हूँ। इसका मतलब है कि निम्नलिखित:
Browser width > 900px = no div is styled
Browser width < 900px and Browser width > 600px = the third div is styed
Browser width < 600px = the second div is styled
क्या सीएसएस का उपयोग करके इसे प्राप्त करने का कोई तरीका है?
अग्रिम धन्यवाद
क्या आपका मतलब है कि 'फ्लेक्स-रैप: रैप' लागू तत्व के साथ शैलियों को लागू करना, या जावास्क्रिप्ट का उपयोग किए बिना समान तरीके से व्यवहार करने के लिए तत्व प्राप्त करना? कुछ उदाहरण कोड या एक छवि प्रदान करके सहायता प्राप्त करने के लिए आमतौर पर अधिक प्रभावी होता है जो आप जो हासिल करने की कोशिश कर रहे हैं उसे प्रदर्शित करता है। –
यहां एक समान प्रश्न है: http://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flex/19576595#19576595 – jbenjohnson
संबंधित: http: //stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid – cimmanon