flex-shrink गुण

flex-shrink गुण यह निर्धारित करता है कि, फ्लेक्स-कंटेनर के अंदर पड़ोसी तत्वों के सापेक्ष कोई फ्लेक्स-ब्लॉक कितना छोटा होगा, यदि पर्याप्त खाली जगह नहीं है।

उदाहरण के लिए, यदि फ्लेक्स-कंटेनर के अंदर के सभी फ्लेक्स-ब्लॉक्स में flex-shrink:1 है, तो वे सभी एक ही आकार के होंगे। यदि उनमें से किसी एक में flex-shrink:2 है, तो वह बाकी सभी से 2 गुना छोटा होगा।

लागू होता है: विशिष्ट फ्लेक्स ब्लॉक पर।

यह गुण संक्षिप्त गुण flex का एक घटक भाग है।

सिंटैक्स

cssसिलेक्टर {
  flex-shrink: धनात्मक संख्या;
}

डिफ़ॉल्ट मान: 1.

उदाहरण

मान लीजिए कि हमारे पास 3 तत्व हैं। उनमें से प्रत्येक की चौड़ाई 200px है और कुल मिलाकर 600px है, जो मूल कंटेनर की चौड़ाई से अधिक है, जो 350px है:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.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;
}

Результат:

आइए नकारात्मक खाली स्थान की गणना सूत्र के अनुसार करें:

प्रत्येक तत्व के लिए flex-shrink गुण के मान को ध्यान में रखते हुए तत्वों की कुल भारित चौड़ाई होगी:

अब आइए निर्धारित करें कि पहला तत्व कितना सिकुड़ेगा:

दूसरा तत्व:

तीसरा तत्व:

इससे पता चलता है कि तीसरा तत्व, जिसका flex-shrink मान 3 है, अन्य तत्वों की तुलना में अधिक सिकुड़ेगा।

यह भी देखें