flex-shrink Özelliği

flex-shrink özelliği, yeterli boş alan olmaması durumunda bir flex bloğunun, flex konteyneri içindeki komşu öğelere kıyasla ne kadar küçüleceğini belirler.

Örneğin, bir flex konteynerinin içindeki tüm flex blokları flex-shrink:1 değerine sahipse, aynı boyutta olacaklardır. Eğer bunlardan biri flex-shrink:2 değerine sahipse, diğerlerinden 2 kat daha küçük olacaktır.

Uygulandığı yer: belirli bir flex bloğu.

Bu özellik, flex kısayol özelliğinin bir parçası olarak yer alır.

Sözdizimi

cssseçici {
  flex-shrink: pozitif sayı;
}

Varsayılan değer: 1.

Örnek

Elimizde 3 öğe olduğunu varsayalım. Her birinin genişliği 200px ve toplam genişlikleri 600px olup, ebeveyn konteynerinin 350px olan genişliğinden fazladır:

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

Результат:

Negatif boş alanı şu formülle hesaplayalım:

Her bir öğe için flex-shrink özellik değerleri dikkate alındığında, öğelerin ağırlıklı toplam genişliği şöyle olacaktır:

Şimdi ilk öğenin ne kadar küçüleceğini belirleyelim:

İkinci öğe:

Üçüncü öğe:

flex-shrink değeri 3 olan üçüncü öğenin diğer öğelerden daha fazla küçüleceği ortaya çıkıyor.

Ayrıca Bakınız