flex-shrinkसंपत्ति लचीला बॉक्स लेआउट मॉड्यूल की एक उप-संपत्ति है।
यह "फ्लेक्स सिकोड़ कारक" को निर्दिष्ट करता है, जो निर्धारित करता है कि फ्लेक्स कंटेनर में बाकी फ्लेक्स आइटम के सापेक्ष कितना कम हो जाएगा जब पंक्ति पर पर्याप्त जगह नहीं होती है।
जब छोड़ा जाता है, तो इसे सेट किया जाता है 1और फ्लेक्स हटने वाले कारक को नकारात्मक स्थान वितरित करते समय फ्लेक्स आधार से गुणा किया जाता है।
वाक्य - विन्यास
flex-shrink: .flex-item ( flex-shrink: 2; )डेमो
इस डेमो की पूरी क्षमता को देखने के लिए, आपको इसकी चौड़ाई का आकार बदलने में सक्षम होना होगा, इसलिए कृपया इसे सीधे कोडपॉइंट पर देखें।
इस डेमो में:
- पहले आइटम है
flex: 1 1 20em(आशुलिपि के लिएflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - दूसरे मद है
flex: 2 2 20em(आशुलिपि के लिएflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
दोनों फ्लेक्स आइटम 20em चौड़ा होना चाहते हैं। फ्लेक्स-ग्रो (पहला पैरामीटर) के कारण, यदि फ्लेक्स कंटेनर 40em से बड़ा है, तो दूसरा बच्चा पहले बच्चे की तुलना में दोगुना बचा हुआ स्थान लेगा। लेकिन अगर मूल तत्व 40em से कम चौड़ा है, तो 2 बच्चे का 1 बच्चे के रूप में दुगना मुंडा होगा, जिससे वह छोटा दिख रहा है (2 पैरामीटर, फ्लेक्स-हटने के कारण)।
ब्राउज़र का समर्थन
- (आधुनिक) का अर्थ है विनिर्देश से हाल का वाक्य-विन्यास (जैसे
display: flex;) - (हाइब्रिड) का अर्थ है 2011 से एक विषम अनौपचारिक वाक्यविन्यास (जैसे
display: flexbox;) - (पुराना) का अर्थ है 2009 से पुराना वाक्यविन्यास (जैसे
display: box;)
| क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| 21+ (आधुनिक) 20- (पुराना) | 3.1+ (पुराना) | 2-21 (पुराना) 22+ (नया) | 12.1+ (आधुनिक) | 10+ (संकर) | 2.1+ (पुराना) | 3.2+ (पुराना) |
ब्लैकबेरी ब्राउज़र 10+ नए सिंटैक्स का समर्थन करता है।
सबसे अच्छा ब्राउज़र समर्थन पाने के लिए वाक्यविन्यास को कैसे मिलाया जाए, इसके बारे में अधिक जानकारी के लिए, कृपया इस लेख (CSS-Tricks) या इस लेख (DevOpera) का संदर्भ लें।