यह आलेख टेलविंड सीएसएस में फ्लेक्स आइटम को लपेटने से रोकने की विधि समझाएगा।
फ्लेक्स आइटम को टेलविंड में लपेटने से कैसे रोकें/रोकें?
फ्लेक्स आइटम को टेलविंड में लपेटने से रोकने के लिए, एक HTML फ़ाइल बनाएं। फिर, फ्लेक्स आइटम को लपेटने से रोकने के लिए HTML प्रोग्राम में फ्लेक्स कंटेनर के साथ 'फ्लेक्स-नॉरैप' उपयोगिता का उपयोग करें। इसके बाद, HTML वेब पेज देखकर परिवर्तन सुनिश्चित करें।
इसे बेहतर ढंग से समझने के लिए नीचे दिए गए चरणों को आज़माएँ:
चरण 1: फ्लेक्स आइटम को HTML प्रोग्राम में लपेटने से रोकें
एक HTML प्रोग्राम बनाएं और “का उपयोग करें” फ्लेक्स-नॉरैप फ्लेक्स आइटम को लपेटने से रोकने के लिए वांछित फ्लेक्स कंटेनर के साथ उपयोगिता:
< शरीर >
< डिव कक्षा = 'फ्लेक्स फ्लेक्स-नॉरैप एच-40' >
< डिव कक्षा = 'आधार-1/4 बीजी-लाल-500 मीटर-1' > 1 < / डिव >
< डिव कक्षा = 'आधार-1/3 बीजी-पीला-500 मीटर-1' > 2 < / डिव >
< डिव कक्षा = 'आधार-1/2 बीजी-टील-500 मीटर-1' > 3 < / डिव >
< / डिव >
< / शरीर >
यहाँ:
- “ मोड़ना 'क्लास फ्लेक्सबॉक्स लेआउट को सक्षम बनाता है तत्व और बाल तत्वों को व्यवस्थित और संरेखित करने की अनुमति देता है।
- “ फ्लेक्स-नॉरैप क्लास निर्दिष्ट करती है कि फ्लेक्स आइटम को कई लाइनों में लपेटा नहीं जाना चाहिए और सभी फ्लेक्स आइटम को एक ही लाइन में रखना चाहिए।
- “ आधार-1/4 ”,“ आधार-1/3 ', और ' आधार-1/2 ” कक्षाएं आंतरिक सेट करती हैं
की चौड़ाई क्रमशः 25%, 33.33% और उनके मूल तत्वों का 50% है।
चरण 2: आउटपुट सत्यापित करें
यह सुनिश्चित करने के लिए कि फ्लेक्स आइटम लपेटे नहीं गए हैं, HTML वेब पेज देखें:
उपरोक्त वेब पेज में, फ्लेक्स आइटम एक पंक्ति में हैं और लपेटे नहीं गए हैं।
निष्कर्ष
फ्लेक्स आइटम को टेलविंड में लपेटने से रोकने के लिए, HTML प्रोग्राम में वांछित फ्लेक्स कंटेनर के साथ 'फ्लेक्स-नॉरैप' उपयोगिता का उपयोग करें। यह उपयोगिता फ्लेक्स आइटम को लपेटने से रोकती है। सत्यापन के लिए, वेब पेज पर परिवर्तन देखें। इस आलेख में फ्लेक्स आइटम को टेलविंड सीएसएस में लपेटने से रोकने की विधि का वर्णन किया गया है।