फ्लेक्स-सिकुड़ फ्लेक्स तत्वों पर किस परिस्थिति में लागू होता है और यह कैसे काम करता है?

Question

मैंने इस अच्छा CSS Flexbox demo page के साथ खेला है और मैं अधिकांश अवधारणाओं को समझता हूं, हालांकि मैं काम में flex-shrink देख नहीं पाया। मैं जो भी सेटिंग्स वहां लागू करता हूं, मुझे पृष्ठ पर कोई फर्क नहीं पड़ता।

spec से

:

< 'फ्लेक्स-बढ़ने'>

इस घटक सेट 'फ्लेक्स-बढ़ने' पूरे अक्षरों में लिखावट और निर्दिष्ट फ्लेक्स बढ़ने कारक है, जो निर्धारित करता है कितना फ्लेक्स आइटम होगा फ्लेक्स कंटेनर में शेष फ्लेक्स आइटमों के सापेक्ष सकारात्मक मुक्त स्थान वितरित किया जाता है। छोड़े जाने पर, यह '1' पर सेट होता है।

< 'फ्लेक्स-हटना'>

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

किस परिस्थितियों में flex-shrink लागू किया जाएगा (यानी जब नकारात्मक स्थान वितरित किया जाता है)? मैंने कस्टम पेज को फ्लेक्सबॉक्स तत्व पर चौड़ाई निर्धारित करने और इसके अंदर के तत्वों की चौड़ाई (ओवर-) चौड़ाई बनाने के लिए कोशिश की है, लेकिन ऐसा लगता है कि यह वर्णित मामला नहीं है।

क्या यह पहले से ही समर्थित है?

एक समाधान के रूप में, या तो लिंक किए गए डेमो, या जेएसफ़िल्ड-जैसे लाइव डेमो पर विकल्पों का एक सेट अत्यधिक सराहना की जाएगी।

Answer 1

कार्रवाई में flex-shrink देखने के लिए, आपको अपने कंटेनर को छोटा बनाने में सक्षम होना चाहिए।

HTML:

<div class="container"> 
    <div class="child one"> 
    Child One 
    </div> 

    <div class="child two"> 
    Child Two 
    </div> 
</div> 

सीएसएस:

div { 
    border: 1px solid; 
} 

.container { 
    display: flex; 
} 

.child.one { 
    flex: 1 1 10em; 
    color: green; 
} 

.child.two { 
    flex: 2 2 10em; 
    color: purple; 
} 

• http://jsfiddle.net/GyXxT/ (बिना उपसर्ग - ओपेरा या Firefox रात का निर्माण)
• http://jsfiddle.net/GyXxT/1/ (वेबकिट)

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

वर्तमान फ्लेक्सबॉक्स समर्थन: ओपेरा (अपरिक्स्ड), क्रोम (उपसर्ग), आईई 10 (उपसर्ग, लेकिन थोड़ा अलग संपत्ति नाम/मानों का उपयोग करता है)। फ़ायरफ़ॉक्स वर्तमान में 200 9 (प्रीफिक्स्ड) से पुराने स्पेक का उपयोग करता है, लेकिन नया स्पेक अभी प्रयोगात्मक बनाता है (अपरिवर्तित) में उपलब्ध होना चाहिए।