CSS में फ्लेक्स ब्लॉकों के संपीड़न को नियंत्रित करना

डिफ़ॉल्ट रूप से, सभी तत्वों से उनकी चौड़ाई के अनुपात में टुकड़े छीने जाते हैं। हालाँकि, ऐसा करना संभव है कि कुछ तत्वों से अधिक या कम टुकड़े छीने जाएँ। इसके लिए एक विशेष गुण flex-shrink मौजूद है।

यह गुण एक प्रकार का वजन है, जिससे तत्व की चौड़ाई को गुणा किया जाएगा ऊपर दिए गए सूत्र के अनुसार छीने जाने वाले टुकड़े की गणना करते समय। उदाहरण के लिए, यदि तत्व की चौड़ाई 200px है, और उसका flex-shrink 3 है, तो भारित (यानी वजन से गुणा) तत्व की चौड़ाई इस प्रकार होगी:

200px * 3 = 600px

flex-shrink को ध्यान में रखते हुए सूत्र निम्नलिखित रूप लेगा: नकारात्मक स्वतंत्र स्थान * (तत्व की भारित चौड़ाई / सभी तत्वों की भारित चौड़ाई का योग)।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास 4 तत्व हैं। मान लीजिए कि पहले तत्व की चौड़ाई 400px है, और flex-shrink 2 है, बाकी तत्वों की चौड़ाई - 200px, और उनका flex-shrink है 1। मान लीजिए कि माता-पिता की चौड़ाई 900px है।

तत्वों की कुल चौड़ाई है:

400px + 3 * 200px = 1000px

नकारात्मक स्वतंत्र स्थान इसके बराबर होगा:

1000px - 900px = 100px

तत्वों की कुल भारित चौड़ाई है:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

पहले तत्व की भारित चौड़ाई है:

400px * 2 = 800px

पहले तत्व से निम्नलिखित टुकड़ा छीना जाएगा:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

तत्व की चौड़ाई इसके बराबर होगी:

400px - 57.14px = 342.86px ~ 343px

बाकी प्रत्येक तत्व की भारित चौड़ाई है:

200px * 1 = 200px

प्रत्येक तत्व से निम्नलिखित टुकड़ा छीना जाएगा:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

तत्व की चौड़ाई इसके बराबर होगी:

200px - 14.2px = 185.8px ~ 186px

Задание 1

वर्णित ब्लॉकों को लागू करें और माप द्वारा जांचें, कि तत्वों की चौड़ाई वास्तव में हमारे द्वारा गणना किए गए के बराबर है।

Задание 2

ब्लॉकों की चौड़ाई की गणना करें, और फिर गणना को माप द्वारा जांचें:

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

css.parent {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 2;
}
.elem2 {
  width: 100px;
  flex-shrink: 1;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 3

ब्लॉकों की चौड़ाई की गणना करें, और फिर गणना को माप द्वारा जांचें:

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

css.parent {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 3;
}
.elem2 {
  width: 100px;
  flex-shrink: 2;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 4

ब्लॉकों की चौड़ाई की गणना करें, और फिर गणना को माप द्वारा जांचें:

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

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
  flex-shrink: 3;
}
.elem2 {
  width: 200px;
  flex-shrink: 2;
}
.elem3 {
  width: 200px;
  flex-shrink: 1;
}
.elem4 {
  width: 200px;
  flex-shrink: 1;
}