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