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