flex-wrapसंपत्ति लचीला बॉक्स लेआउट मॉड्यूल की एक उप-संपत्ति है।
यह परिभाषित करता है कि क्या फ्लेक्स आइटम एक लाइन में मजबूर हैं या कई लाइनों में प्रवाहित हो सकते हैं। यदि कई लाइनों पर सेट किया जाता है, तो यह क्रॉस-अक्ष को भी परिभाषित करता है जो यह निर्धारित करता है कि नई लाइनें किस दिशा में खड़ी हैं।
अनुस्मारक: क्रॉस अक्ष मुख्य अक्ष के लंबवत अक्ष है। इसकी दिशा मुख्य अक्ष दिशा पर निर्भर करती है।
flex-wrapसंपत्ति 3 अलग मान स्वीकार करता है:
nowrap( डिफ़ॉल्ट ): एकल-पंक्ति जिसके कारण कंटेनर ओवरफ्लो हो सकता हैwrap: बहु-रेखाएँ, दिशा द्वारा परिभाषित होती हैंflex-directionwrap-reverse: द्वारा परिभाषित दिशा के विपरीत बहु-रेखाएँflex-direction
वाक्य - विन्यास
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )डेमो
निम्नलिखित डेमो में:
- लाल सूची में सेट किया गया है
nowrap - पीली सूची पर सेट है
wrap - नीली सूची पर सेट है
wrap-reverse
नोट: flex-directionडिफ़ॉल्ट मान पर सेट है row:।
पेन फ्लेक्स-रैप देखें: कोडपेन पर सीएसएस-ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा डेमो।
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| 21 * | २। | 1 1 | १२ | 6.1 * |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 4.4 | 7.0-7.1 * |
सबसे अच्छा ब्राउज़र समर्थन पाने के लिए वाक्यविन्यास को कैसे मिलाया जाए, इसके बारे में अधिक जानकारी के लिए, कृपया इस लेख (CSS-Tricks) या इस लेख (DevOpera) का संदर्भ लें।