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

flex-grow ve flex-shrink, flex öğelerinin boş alanı flex konteyner içinde nasıl dağıttığını kontrol eder.

flex-grow:

Flex konteyner içindeki kullanılabilir boş alanın hangi kısmının öğe tarafından alınacağını belirler, boş alan varsa.
Varsayılan olarak flex-grow: 0'dır, bu da öğenin büyümediği anlamına gelir.
Değer - sıfır olmayan negatif olmayan sayı.
Birden fazla öğenin flex-grow değeri 0'dan büyükse, boş alan bu değerlere orantılı olarak dağıtılır.

flex-shrink:

Flex konteynerdeki kullanılabilir alan, tüm flex öğelerinin temel boyutlarının toplamından azsa, öğenin ne kadar küçüleceğini belirler.
Varsayılan olarak flex-shrink: 1'dir, bu da öğenin küçülebileceği anlamına gelir.
Değer - sıfır olmayan negatif olmayan sayı.
flex-shrink değeri ne kadar büyükse, öğe diğerlerine göre o kadar fazla küçülür.
Küçültürken, öğenin temel genişliği (flex-basis veya width) dikkate alınır.

Örnek:

.kapsayici {
  display: flex;
  width: 500px;
  /* Kapsayıcının toplam genişliği */
}

.nesne {
  flex-basis: 100px;
  /* Her öğenin temel genişliği */
}

.nesne:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Varsayılan değerler */
}

.nesne:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Küçülmez */
}

.nesne:nth-child(3) {
  flex-grow: 0; /* Büyümez */
  flex-shrink: 2; /* Daha fazla küçülür */
}

Eğer temel genişliklerin toplamı (300px), kapsayıcının genişliğinden (500px) azsa, kalan alan (200px), flex-grow oranı 1:2 olan ilk ve ikinci öğe arasında dağıtılır.

Eğer temel genişliklerin toplamı kapsayıcı genişliğinden fazla ise, öğeler flex-shrink değerlerine ve temel boyutlarına göre küçültülür. flex-shrink: 0 olan öğe küçültülmez.

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