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