इसके फ्लेक्स बॉक्स ऑर्डर

Question

के आधार पर तत्व को कैसे शैलीबद्ध करें मेरे पास DIV के अंदर कुछ तत्व हैं जो स्क्रीन के आकार के आधार पर पुन: व्यवस्थित होते हैं। मैं इन फ्लेक्स-बॉक्स ऑर्डर के आधार पर इन तत्वों में से प्रत्येक को अलग-अलग शैली बनाना चाहता हूं। चूंकि मीडिया प्रश्न एक ढांचे के अंदर हैं, इसलिए मैं ऐसा करने के लिए अपने स्वयं के मीडिया प्रश्न नहीं लिखूंगा, क्योंकि अगर मैं उनके मीडिया प्रश्नों के लिए ब्रेक पॉइंट बदलता हूं तो मैं अपने मीडिया प्रश्नों को बदलने के लिए याद रखना नहीं चाहता हूं। मैंने + भाई चयनकर्ता का उपयोग करने का प्रयास किया, लेकिन स्पष्ट रूप से यह केवल मूल मार्कअप में तत्वों के क्रम पर लागू होता है, न कि फ्लेक्स बॉक्स प्रतिपादन आदेश। क्या किसी ऑर्डर के आधार पर तत्व को स्टाइल करने का कोई तरीका है जिसमें यह प्रस्तुत डीओएम में दिखाई देता है?

Answer 1

टिप्पणियों में उल्लेख के रूप में, आप एनएच-बच्चे का उपयोग करने में सक्षम नहीं होंगे, क्योंकि शैलियों वास्तविक डीओएम के आदेश पर लागू होंगी, न कि प्रस्तुत किए गए डोम।

ऐसा करने के लिए आपको मार्कअप में अतिरिक्त कक्षाएं जोड़नी होंगी। तो एनएच-चाइल्ड का उपयोग करके पुन: क्रम के बजाय, अतिरिक्त कक्षाओं का उपयोग करके पुन: क्रमबद्ध करें। इस बेला में

<div class="flexGrid"> 
    <div class="flexGrid__item flexGrid__item--alpha"></div> 
    <div class="flexGrid__item flexGrid__item--bravo"></div> 
    <div class="flexGrid__item flexGrid__item--charlie"></div> 
    <div class="flexGrid__item flexGrid__item--delta"></div> 
</div> 

अधिक विस्तार: https://jsfiddle.net/pua5u8a4/1/