विशिष्ट बिंदुओं पर फ्लेक्सबॉक्स में तत्वों को लपेटें

फ्लेक्सबॉक्स लेआउट में, फ्लेक्स-रैप संपत्ति तत्वों को अगली पंक्ति में लपेटने की अनुमति देती है जब कंटेनर की चौड़ाई पार हो गई है. हालाँकि, वर्तमान में यह निर्दिष्ट करने का कोई मानक तरीका नहीं है कि किस तत्व को रैप को ट्रिगर करना चाहिए।

एक निश्चित तत्व के बाद रैपिंग को मजबूर करने के लिए एक समाधान मीडिया क्वेरी के भीतर उस तत्व के लिए फ्लेक्स-आधार को 100% पर सेट करना है। विशिष्ट चौड़ाई. यह तत्व को उसके मूल कंटेनर की पूरी चौड़ाई लेने के लिए मजबूर करता है, प्रभावी ढंग से उसके बाद की रेखा को तोड़ता है:

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

उदाहरण के लिए, निम्नलिखित सीएसएस प्रत्येक दो आइटम के बाद सूची आइटम को लपेटेगा:

ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}

यह विधि अतिरिक्त मार्कअप की आवश्यकता के बिना रैपिंग व्यवहार को नियंत्रित करने का एक लचीला तरीका प्रदान करती है। हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि यह मीडिया प्रश्नों पर निर्भर करता है, जो कुछ स्थितियों में प्रदर्शन ओवरहेड और सीमाएं पेश कर सकता है।