अधिकतम इनलाइन आकार - सीएसएस-ट्रिक्स

max-inline-sizeCSS में एक तार्किक गुण है जो किसी तत्व की अधिकतम चौड़ाई writing-modeको क्षैतिज, या writing-modeलंबवत होने पर तत्व की अधिकतम ऊंचाई को परिभाषित करता है।

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

जैसा कि आप ऊपर के उदाहरण से अनुमान लगा सकते हैं, writing-modeसंपत्ति पाठ के उन्मुखीकरण और लेआउट के प्रवाह को 90 डिग्री से बदल देती है।

फैंसी डिजाइन बनाने के अलावा, अभिविन्यास को बदलने का मुख्य कारण एक साइट पर अंतर्राष्ट्रीयकरण को समायोजित करना है। कई पूर्वी एशियाई लिपियों जैसे चीनी, जापानी और कोरियाई को क्षैतिज या लंबवत लिखा जा सकता है। तार्किक गुणों का उपयोग करके, हम उपयोगकर्ता के लेखन मोड के आधार पर तत्वों की सही आकार दिशा प्रदान कर सकते हैं।

जेन सीमन्स के पास एक लेख और प्रस्तुति है जो सीएसएस लेखन मोड में गहराई से जाती है।

क्या हम सिर्फ `max-width`संपत्ति का उपयोग नहीं कर सकते ?

हाँ! लेकिन अगर आप इंटरनेट एक्सप्लोरर का समर्थन नहीं कर रहे हैं, तो max-inline-sizeइसके बजाय उपयोग न करने का कोई कारण नहीं है । max-widthएक भौतिक आयाम है, इसलिए जब लेखन मोड बदलता है, तो एक तत्व अपने क्षैतिज चौड़ाई के आकार को बनाए रखता है, एक लेआउट को तोड़ता है जब इसे लंबवत स्थापित किया जाता है। तार्किक गुण, जैसे max-inline-size, उन परिवर्तनों का जवाब दे सकते हैं और उचित अभिविन्यास में आकार लागू कर सकते हैं।

वाक्य - विन्यास

max-inline-size: ;

प्रारंभिक: auto
इस पर लागू होता है: के रूप में ही heightऔरwidth
इन्हेरिट किया: नहीं
प्रतिशत: इसी भौतिक संपत्ति के लिए
संगणित मूल्य: के रूप में ही heightऔरwidth
एनीमेशन प्रकार: गणना मूल्य प्रकार से

मूल्यों

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

डेमो

जब writing-modeसेट किया जाता है vertical-rl, तो सामग्री बदल जाएगी, लेआउट को बदलना। max-widthबॉक्स की चौड़ाई सामग्री के साथ घूमेगी। लेकिन max-inline-sizeहोशियार है! यह writing-modeमूल्य की परवाह किए बिना, इसकी चौड़ाई को छोड़ देता है । writing-modeदोनों के बीच अंतर देखने के लिए निम्न डेमो में टॉगल करें ।