टेलविंड में 'जस्टिफ़ाइ-कंटेंट' के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ कैसे लागू करें?

” मध्यम और बड़े स्क्रीन आकार पर अपने आइटम के क्षैतिज संरेखण को बदलने के लिए तत्व:

< शरीर >

< डिव कक्षा = 'फ्लेक्स जस्टिफाई-स्टार्ट एमडी: जस्टिफाई-बीच एलजी: जस्टिफाई-एंड गैप-3 एम-3 बीजी-टील-700' >
< डिव कक्षा = 'बीजी-पीला-400 डब्ल्यू-24 एच-12' > 1 < / डिव >
< डिव कक्षा = 'बीजी-पीला-400 डब्ल्यू-24 एच-12' > 2 < / डिव >
< डिव कक्षा = 'बीजी-पीला-400 डब्ल्यू-24 एच-12' > 3 < / डिव >

< / डिव >

< / शरीर >

यहाँ:

• “उचित-शुरूआत” क्लास कंटेनर के मुख्य अक्ष की शुरुआत में फ्लेक्स आइटम को संरेखित करता है।
• 'एमडी: बीच का औचित्य' क्लास फ्लेक्स आइटम को कंटेनर के मुख्य अक्ष के साथ मध्यम स्क्रीन आकार पर उनके बीच समान अंतर के साथ वितरित करता है।
• 'एलजी: जस्टिफ़ाई-एंड' क्लास बड़े स्क्रीन आकार पर कंटेनर के मुख्य अक्ष के अंत में फ्लेक्स आइटम को संरेखित करता है।

उत्पादन

---

---

उपरोक्त आउटपुट से पता चलता है कि जैसे-जैसे स्क्रीन का आकार बदलता है, फ्लेक्स आइटम का क्षैतिज संरेखण बदल रहा है। यह इंगित करता है कि निर्दिष्ट ब्रेकप्वाइंट और मीडिया क्वेरीज़ को 'जस्टिफ़ाइ-कंटेंट' उपयोगिता के साथ प्रभावी ढंग से लागू किया गया है।

निष्कर्ष

टेलविंड में 'जस्टिफ़ाइ-कंटेंट' उपयोगिताओं के साथ ब्रेकप्वाइंट और मीडिया प्रश्नों को लागू करने के लिए, वांछित मान को परिभाषित करें “औचित्य-<मान>” का उपयोग करके विभिन्न स्क्रीन आकारों के लिए उपयोगिता एमडी ' या ' एलजी “ब्रेकप्वाइंट. सत्यापन के लिए, वेब पेज का स्क्रीन आकार बदलें और परिवर्तन सुनिश्चित करें। इस आलेख ने टेलविंड में 'जस्टिफ़ाइ-कंटेंट' उपयोगिताओं पर वांछित ब्रेकप्वाइंट और मीडिया प्रश्नों को लागू करने के लिए उदाहरण प्रदर्शित किया है।