CSS max-inline-size प्रतियोगिता

परिभाषा और उपयोग

max-inline-size गुण इलेमेंट को लाइन इनर्लाइन दिशा में अधिकतम आकार सेट करता है。

यदि सामग्री का आकार लाइन इनर्लाइन दिशा में अधिकतम आकार से कम होता है, तो max-inline-size गुण मान असक्रिय है।

यदि सामग्री का आकार लाइन इनर्लाइन दिशा में अधिकतम आकार से बड़ा होता है, तो max-inline-size गुण मान

ध्यान दें:संबंधित CSS गुण writing-mode लाइन इनर्लाइन दिशा को परिभाषित करता है, जो इसे प्रभावित करता है max-inline-size का परिणाम है।अंग्रेजी पृष्ठों के लिए ब्लॉक दिशा नीचे की ओर है और लाइन इनर्लाइन दिशा दाएँ से बाएँ की ओर है。

CSS max-inline-size गुण और CSS गुण मैक्स-हेइट और मैक्स-विड्थ बहुत अधिक आसान, लेकिन max-inline-size गुण लाइन इनर्लाइन दिशा पर निर्भर करता है。

उदाहरण

उदाहरण 1

डिव एलेमेंट को लाइन इनर्लाइन दिशा में अधिकतम आकार 60 पिक्सल के रूप में सेट करें:

div {
  max-inline-size: 60px;
}

अपने आप साबित करें

उदाहरण 2: लिखने की मोड

डिव एलेमेंट को writing-mode गुण मान को vertical-rl पर सेट करने पर लाइन इनर्लाइन दिशा पार्श्वीय से नीचे की ओर बदलती है, जो इसे प्रभावित करता है max-inline-size गुण के काम करने के तरीका:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

अपने आप साबित करें

उदाहरण 3: Max-inline-size vs Inline-size

एक <div> एलेमेंट को देखें (inline-size 100px (और एक अन्य <div> एलेमेंट (max-inline-size 100px (यदि सामग्री का आकार बदलता है) के विभिन्न प्रतिक्रियाओं के लिए:

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

अपने आप साबित करें

CSS व्याकरण

max-inline-size: auto|लंबाई|डिफ़ॉल्ट|विरासत;

गुण मान

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

संदर्भःCSS इनलाइन-साइज प्रकृति

संदर्भःCSS min-inline-size प्रतियोगिता

संदर्भःCSS max-height प्रतियोगिता

संदर्भःCSS max-width प्रतियोगिता

संदर्भःCSS रिटिंग-मोड प्रभाव