Flex-grow ve flex-shrink özellikleri nasıl çalışır?

flex-grow ve flex-shrink öğelerin, boş alan veya yetersiz alan durumunda, flex kapsayıcı içindeki boyutlarını uyarlama şeklini belirler.

flex-grow - kapsayıcıda boş alan varsa, bir öğenin ne kadar büyüyeceğini belirleyen katsayıdır. Varsayılan değer 0'dır (öğe genişlemez). Birden fazla öğenin flex-grow değeri 0'dan büyükse, boş alan bu öğeler arasında flex-grow değerlerine göre orantılı olarak dağıtılır.

.item {
  flex-grow: 1; /* Öğenin kullanılabilir tüm boş alanı kullanmasını sağlar */
}

flex-shrink - kapsayıcıda yeterli alan yoksa, bir öğenin ne kadar küçüleceğini belirler. Varsayılan değer 1'dir (öğe, diğer küçülen öğelerle orantılı olarak küçülür). 0 değeri, öğenin küçülmesini engeller.

.item {
  flex-shrink: 0; /* Öğenin küçülmeyeceğini belirtir */
}

flex-basis ile birlikte, bunlar flex adlı kısaltma özelliğini oluşturur: flex: <flex-grow> <flex-shrink> <flex-basis>.

Kullanım örneği:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

.container {
  display: flex;
  width: 400px; /* Sabit genişlikli kapsayıcı örneği */
}

.item {
  flex-basis: 100px; /* Tüm öğelerin temel boyutu */
}

.item-1 {
  flex-grow: 1; /* Öğenin boş alanı kullanmasını sağlar */
}

.item-2 {
  flex-shrink: 0; /* Öğenin küçülmesini engeller */
}

Eğer kapsayıcı 200px’den daha genişse (100px + 100px), item-1 kalan boş alanı alır. Kapsayıcı zaten 200px ise, item-2 temel boyutunu korur ve item-1 küçülür.