मिन-कंटेंट और अधिकतम कंटेंट कैसे काम करते हैं?

Question 1

कैसे कर रहे हैं min-contentऔर max-contentमूल्यों सीएसएस में गणना?

और आंतरिक आयाम का क्या अर्थ है?

Question 2

नोट: इस पाठ में "चौड़ाई" से तात्पर्य "तार्किक चौड़ाई" से है, सीएसएस से नहीं width; अर्थात, सीएसएस के लिए मान भी मान्य हैं height, यदि भाषा की दिशा लंबवत है (जैसे पूर्व-एशियाई भाषाएँ) या फ्लेक्सबॉक्स या ग्रिड में। min-contentऔर max-contentके लिए मान्य मान रहे हैं width, height, min-width, min-height, max-width, max-heightऔर भी अधिक गुण (जैसे flex-basis)।

एक बॉक्स के आंतरिक आयाम क्या हैं?

CSS साइज़िंग लेवल 3 ने आंतरिक आयामों की अवधारणा को प्रस्तुत किया - बाह्य के विपरीत । एक बाह्य एक बॉक्स के आयाम बॉक्स की मूल बॉक्स पर गणना की जाती है। उदाहरण के लिए width: 80%कहा जाता है कि एक बाहरी आयाम है, क्योंकि widthविषय widthइसके युक्त बॉक्स पर निर्भर करता है ।

इसके विपरीत, आंतरिक रूप width: min-contentसे कहा जाता है कि बॉक्स की चौड़ाई की गणना उन सामग्रियों के आयाम पर की जाती है जो बॉक्स में ही होते हैं।

आंतरिक आयाम बॉक्स के गुण होते हैं, बाहरी आयाम केवल तभी उपलब्ध होते हैं जब बॉक्स को दस्तावेज़ में रखा जाता है और एक संदर्भ में जो इन मूल्यों की गणना करने की अनुमति देता है। उदाहरण के लिए, सीएसएस-प्रवाह (क्लासिक सीएसएस लेआउट मोड) में, जैसा कि आप शायद जानते हैं, height: 20%इसका केवल तभी प्रभाव पड़ता है जब heightमूल तत्व में परिभाषित किया जाता है (यानी यह अंतर्निहित है); यह एक बाह्य आयाम का एक मामला है जो गणना योग्य नहीं है (जब एक बाहरी मूल्य उपलब्ध नहीं है, तो सीएसएस अपने आंतरिक समकक्ष पर वापस लौटता है)। इसके बजाय height: min-contentहमेशा गणना योग्य है, क्योंकि यह बॉक्स के लिए आंतरिक है, और यह हमेशा दस्तावेज़ में बॉक्स के प्लेसमेंट (या बॉक्स की अनुपस्थिति) की परवाह किए बिना समान है।

की परिभाषा min-contentऔर max-contentकई वर्षों में बदल गई है, लेकिन परिणाम हमेशा एक ही रहा, और यह समझ में बहुत सरल है। उन्हें मूल रूप से समुदाय द्वारा कीवर्ड के लिए अनुरोध किया गया था width, जिनकी गणना मूल्य बॉक्स के चौड़ाई से मेल खाती है जब बॉक्स floatआईएनजी होता है। और वास्तव में, इन दोनों गुणों की परिभाषा मूल रूप से के व्यवहार पर आधारित थी float; अब वे अधिक सामान्य रूप से निम्नानुसार परिभाषित हैं:

`min-content`

https://www.w3.org/TR/css-sizing-3/#min-content

सबसे छोटा आकार एक बॉक्स ले सकता है जो अतिप्रवाह का कारण नहीं बनता है जिसे बड़े आकार का चयन करके टाला जा सकता है।

दूसरे शब्दों में, एक बॉक्स की सबसे छोटी चौड़ाई जहां बॉक्स की सामग्री बॉक्स को खुद से बाहर नहीं निकालती है ।

यह कल्पना करने का एक अच्छा तरीका वास्तव में, का उपयोग कर रहा है float।

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

न्यूनतम सामग्री

(GIF सोर्स: http://jsfiddle.net/6srop4zu/ )

उपरोक्त जीआईएफ में, लाल बॉक्स की न्यूनतम सामग्री की चौड़ाई उस समय लाल बॉक्स की चौड़ाई के बराबर होती है, जब ब्लू बॉक्स की चौड़ाई 0px (जीआईएफ में 234px, भिन्न हो सकती है)।

जैसा कि आप देख सकते हैं, अगर लाल बॉक्स को छोटा किया गया था, तो शब्द supercalifragilisticexpialidociousलाल बॉक्स को ओवरफ्लो कर देगा, इसलिए इस मामले min-contentमें उस विशेष शब्द की चौड़ाई के बराबर होती है, क्योंकि यह वह है जो क्षैतिज रूप से सबसे अधिक स्थान लेता है।

`max-content`

https://www.w3.org/TR/css-sizing-3/#max-content

एक बॉक्स का "आदर्श" आकार किसी दिए गए अक्ष में जब अनंत उपलब्ध स्थान दिया जाता है। आमतौर पर यह सबसे छोटा आकार होता है, जो बॉक्स उस अक्ष में ले जा सकता है, जबकि अपनी सामग्री के चारों ओर फिट रहता है, अर्थात अतिप्रवाह से बचने के दौरान अनफिल्टर्ड स्पेस को कम करता है।

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

अधिकतम सामग्री

(GIF स्रोत: http://jsfiddle.net/nktsrzvg/ )

उपरोक्त GIF में, लाल बॉक्स की अधिकतम-सामग्री चौड़ाई , लाल बॉक्स की चौड़ाई के बराबर होती है जब ब्लू बॉक्स की चौड़ाई अनंत होती है (GIF में 386px, jsfiddle में भिन्न हो सकती है)।

यहां, लाल बॉक्स पूरी तरह से नीले बॉक्स में एक्स अक्ष पर उपलब्ध स्थान का लाभ उठाता है, लेकिन इसे बर्बाद किए बिना। सामग्री को प्रतिबंध के बिना प्रासंगिक अक्ष पर विस्तार करने की अनुमति है, और लाल बॉक्स उन्हें लपेटता है और अधिकतम विस्तार के बिंदु पर।

किस बारे में fit-content, stretchऔर दूसरों के बारे में ? इन संपत्तियों को वर्तमान में संशोधित किया जा रहा है और जैसे वे स्थिर नहीं हैं (तिथि: जुलाई 2018)। जब वे थोड़े अधिक परिपक्व होंगे (उम्मीद है कि जल्द ही) उन्हें यहां जोड़ा जाएगा।

Question 3

मैंने पाया कि जवाब स्पष्ट और पूरी तरह से हैं। लेकिन किसी के लिए एक संक्षिप्त की तलाश में:

न्यूनतम सामग्री:

न्यूनतम चौड़ाई जो एक सामग्री (शब्दों का एक समूह) हो सकती है। इसका अर्थ है सामग्री में सबसे बड़े शब्द की चौड़ाई।

उदाहरण:

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

अधिकतम सामग्री:

अधिकतम चौड़ाई जो एक सामग्री (शब्दों का समूह) हो सकती है। यह सामग्री की चौड़ाई का मतलब है जब सभी शब्दों को एक पंक्ति में एक साथ व्यवस्थित किया जाता है।

उदाहरण:

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->