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

flex-grow bir öğenin konteynerdeki boş alan varsa ne kadar büyüyebileceğini belirler. 0 (varsayılan) değeri, öğenin büyümeyeceği anlamına gelir. Pozitif değerler, aynı satırdaki diğer flex öğelerine göre büyüme katsayısını gösterir.

flex-shrink ise, öğenin konteynerdeki boş alan azaldığında ne kadar küçülebileceğini belirler. 1 (varsayılan) değeri, küçülebileceği anlamına gelir. 0 değeri, küçülmeyi engeller. Pozitif değerler, diğer flex öğelerine göre küçülme katsayısını gösterir.

Bir örnek görelim:

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

.container {
  display: flex;
  width: 400px; /* Kapsayıcı genişliği */
}

.item {
  flex-basis: 100px; /* Her öğenin temel boyutu */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Boş alandan 1 pay alacak */
  flex-shrink: 0; /* Küçülmeyecek */
}

.item-2 {
  flex-grow: 2; /* Boş alandan 2 pay alacak */
  flex-shrink: 1; /* Küçülebilir */
}

.item-3 {
  flex-grow: 1; /* Boş alandan 1 pay alacak */
  flex-shrink: 1; /* Küçülebilir */
}

Bu durumda, toplam temel boyut 300px'dir (3 * 100px). Boş alan 100px'dir (400px - 300px). Bu boş alan, flex-grow değerlerine göre 1 + 2 + 1 = 4 oranında dağıtılır. İtem 1, 1/4 * 100px = 25px ek alan alır. İtem 2, 2/4 * 100px = 50px ek alan alır. İtem 3, 1/4 * 100px = 25px ek alan alır.

Son boyutlar: İtem 1: 100px + 25px = 125px İtem 2: 100px + 50px = 150px İtem 3: 100px + 25px = 125px

Eğer kapsayıcı genişliği yetersiz olursa (örneğin 200px), küçültme gerekir. Yetersiz alan durumunda, flex-shrink ve öğelerin boyutları dikkate alınır. Eksik alan, flex-shrink değeri sıfırdan büyük olan öğeler arasında, flex-shrink çarpımıyla ve flex-basis sonrası mevcut boyutlarına göre orantılı olarak dağıtılır. Bu küçültme algoritması biraz daha karmaşıktır, ancak temel fikir, flex-shrink değeri büyük olan veya mevcut boyutu büyük olan öğelerin daha fazla küçüleceğidir.

flex-basis, flex-grow ve flex-shrink genellikle birlikte flex kısa yol özelliği olarak kullanılır. Örneğin, flex: 1 1 auto; ifadesi, flex-grow: 1; flex-shrink: 1; flex-basis: auto; ile aynıdır.

Alan dağıtımında öncelik:

1. flex-basis: Öğenin başlangıç boyutunu belirler.
2. flex-grow: Pozitif boş alanı dağıtır.
3. flex-shrink: Negatif boş alanı (sıkıştırma ihtiyacı) dağıtır.