टेलविंड सीएसएस प्रदान करता है ' संरेखित-आइटम कंटेनर के क्रॉस-एक्सिस के साथ फ्लेक्स और ग्रिड आइटम की स्थिति को नियंत्रित करने के लिए उपयोगिताएँ। इसमें विभिन्न उपयोगिता वर्ग हैं, जैसे 'आइटम-स्टार्ट', 'आइटम-सेंटर', 'आइटम-एंड', 'आइटम-बेसलाइन', आदि। इसके अलावा, उपयोगकर्ता होवर प्रॉपर्टी का उपयोग 'आइटम- <वैल्यू>' के साथ भी कर सकते हैं। होवर पर कंटेनर के क्रॉस-अक्ष के साथ फ्लेक्स या ग्रिड आइटम की स्थिति को बदलने के लिए उपयोगिता कक्षाएं।
यह आलेख टेलविंड सीएसएस में एलाइन-आइटम्स' उपयोगिताओं पर होवर लागू करने की विधि का उदाहरण देगा।
टेलविंड में 'संरेखण-आइटम' उपयोगिताओं पर होवर कैसे लागू करें?
टेलविंड में 'संरेखित-आइटम' उपयोगिताओं पर होवर लागू करने के लिए, एक HTML संरचना बनाएं और 'जोड़ें' मंडराना 'वांछित के साथ उपयोगिता वर्ग' आइटम-<मूल्य> कंटेनर में उपयोगिता. इसके बाद, HTML वेब पेज देखें और परिवर्तनों को सत्यापित करने के लिए निर्दिष्ट तत्व पर माउस घुमाएँ।
वाक्य - विन्यास
< तत्व कक्षा = 'होवर:आइटम-<मान>...' > ... तत्व >
<मान> को निम्न विकल्पों में से किसी एक से बदलें: 'प्रारंभ', 'केंद्र', 'अंत', 'आधार रेखा' या 'खिंचाव'।
उदाहरण
इस उदाहरण में, हम 'आइटम-स्टार्ट' प्रॉपर्टी के साथ एक फ्लेक्स कंटेनर बनाएंगे। फिर, हम 'का उपयोग करेंगे होवर:आइटम-केंद्र 'कक्षा में' उत्पादन टेलविंड में 'संरेखण-आइटम' उपयोगिताओं पर होवर प्रभाव लागू करने के लिए, 'का उपयोग करें' मंडराना 'विशेष के साथ उपयोगिता वर्ग' आइटम-<मूल्य> फ्लेक्स या ग्रिड कंटेनर में उपयोगिता। सत्यापन के लिए, वेब पेज पर निर्दिष्ट कंटेनर पर माउस घुमाएँ। इस आलेख ने टेलविंड में 'संरेखण-आइटम' उपयोगिताओं पर होवर प्रभाव लागू करने के लिए उदाहरण प्रदर्शित किए हैं।
< शरीर >
< डिव कक्षा = 'फ्लेक्स आइटम-स्टार्ट होवर: आइटम-सेंटर जस्टिफाई-अराउंड टेक्स्ट-सेंटर एच-44 एम-3 बीजी-पिंक-300 गैप-4' >
< डिव कक्षा = 'बीजी-गुलाबी-600 पीवाई-4 डब्ल्यू-40' > 1 डिव >
< डिव कक्षा = 'बीजी-गुलाबी-600 पीवाई-12 डब्ल्यू-40' > 2 डिव >
< डिव कक्षा = 'बीजी-गुलाबी-600 पीवाई-8 डब्ल्यू-40' > 3 डिव >
डिव >
शरीर >
यहाँ:
उपरोक्त वेब पेज से, यह देखा जा सकता है कि फ्लेक्स आइटम का संरेखण होवर पर कंटेनर के क्रॉस-अक्ष के साथ बदल रहा है। निष्कर्ष