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