Flexbox kullanan öğelerin boyutlarını nasıl esnek bir…

Flexbox içindeki öğelerin boyutlarını flex-grow, flex-shrink ve flex-basis özellikleri kullanarak esnek şekilde değiştirebilirsiniz.

flex-grow: Bir öğenin, konteynerdeki boş alanı kaplamak için ne kadar genişleyebileceğini belirler. Varsayılan değer 0'dır (genişlemez). Daha yüksek bir değer, diğer öğelere göre daha büyük bir genişleme katsayısı anlamına gelir.
flex-shrink: Bir öğenin, boş alan yetersiz olduğunda ne kadar küçülebileceğini belirler. Varsayılan değer 1'dir (küçülür). Daha yüksek bir değer, daha büyük bir küçülme katsayısı anlamına gelir.
flex-basis: Boş alanın dağıtılmasından önce öğenin temel boyutunu belirler. Sabit bir değer (px, %, rem) veya anahtar kelime (auto, content) olabilir.

Bu üç özellik genellikle flex kısaltma özelliğinde birleştirilir: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Kullanım örnekleri:

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

/* Alan yetersizliği durumunda öğe küçülmeyecek */
.flex-item {
  flex-shrink: 0;
}

/* Öğenin temel boyutu 100px olup, alan varsa genişler */
.flex-item {
  flex: 1 1 100px;
}

/* Öğenin temel boyutu içeriğiyle belirlenir ve küçülebilir */
.flex-item {
  flex: 0 1 auto; /* `flex: initial;` ile eşdeğerdir */
}

/* Öğenin genişlemesi, küçülmesi engellenir ve temel boyut içeriğe göre belirlenir */
.flex-item {
  flex: 0 0 auto; /* `flex: none;` ile eşdeğerdir */
}

/* Öğenin genişlemesi, küçülmesi ve temel boyutu 0 olan öğeler (aynı genişlikte öğeler oluşturmak için kullanışlı) */
.flex-item {
  flex: 1 1 0; /* `flex: auto;` ile eşdeğerdir */
}

Bu özelliklerin kullanımı, ekran veya içerik boyutundaki değişikliklerde flex konteyner içindeki öğelerin davranışını hassas şekilde yönetmeye olanak tanır.

Flexbox kullanan öğelerin boyutlarını nasıl esnek bir şekilde değiştirebilirsiniz?