flex-shrink गुण
flex-shrink गुण यह निर्धारित करता है कि,
फ्लेक्स-कंटेनर के अंदर पड़ोसी तत्वों के सापेक्ष
कोई फ्लेक्स-ब्लॉक कितना छोटा होगा, यदि पर्याप्त
खाली जगह नहीं है।
उदाहरण के लिए, यदि फ्लेक्स-कंटेनर के अंदर के सभी फ्लेक्स-ब्लॉक्स
में flex-shrink:1 है, तो वे सभी एक ही आकार के होंगे।
यदि उनमें से किसी एक में flex-shrink:2 है,
तो वह बाकी सभी से 2 गुना छोटा होगा।
लागू होता है: विशिष्ट फ्लेक्स ब्लॉक पर।
यह गुण संक्षिप्त गुण flex
का एक घटक भाग है।
सिंटैक्स
सिलेक्टर {
flex-shrink: धनात्मक संख्या;
}
डिफ़ॉल्ट मान: 1.
उदाहरण
मान लीजिए कि हमारे पास 3 तत्व हैं। उनमें से प्रत्येक की चौड़ाई
200px है और कुल मिलाकर 600px है,
जो मूल कंटेनर की चौड़ाई से अधिक है, जो
350px है:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex-shrink: 1;
}
.elem2 {
flex-shrink: 2;
}
.elem3 {
flex-shrink: 3;
}
:
आइए नकारात्मक खाली स्थान की गणना सूत्र के अनुसार करें:
600px - 350px = 250px
प्रत्येक तत्व के लिए flex-shrink गुण के मान को
ध्यान में रखते हुए तत्वों की कुल भारित चौड़ाई होगी:
200px * 1 + 200px * 2 + 200px * 3 = 1200pxअब आइए निर्धारित करें कि पहला तत्व कितना सिकुड़ेगा:
250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6pxदूसरा तत्व:
250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3pxतीसरा तत्व:
250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px
इससे पता चलता है कि तीसरा तत्व, जिसका flex-shrink
मान 3 है, अन्य तत्वों की तुलना में अधिक सिकुड़ेगा।
यह भी देखें
-
गुण
flex-direction,
जो फ्लेक्स ब्लॉक्स के अक्षों की दिशा निर्धारित करता है -
गुण
justify-content,
जो मुख्य अक्ष के साथ संरेखण निर्धारित करता है -
गुण
align-items,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करता है -
गुण
flex-wrap,
जो फ्लेक्स ब्लॉक्स की मल्टीलाइन क्षमता निर्धारित करता है -
गुण
flex-flow,
flex-direction और flex-wrap के लिए संक्षिप्त रूप -
गुण
order,
जो फ्लेक्स ब्लॉक्स का क्रम निर्धारित करता है -
गुण
align-self,
जो एक ब्लॉक का संरेखण निर्धारित करता है -
गुण
flex-basis,
जो किसी विशिष्ट फ्लेक्स ब्लॉक का आकार निर्धारित करता है -
गुण
flex-grow,
जो फ्लेक्स ब्लॉक्स की "विस्तार" क्षमता निर्धारित करता है -
गुण
flex,
flex-grow, flex-shrink और flex-basis के लिए संक्षिप्त रूप
