flexbox flex-shrink nedir?

flex-shrink tanımlanmış eleman, esnek kapsayıcı eleman içindeki diğer elemanlara göre nasıl büzüleceğini belirler.

Tarayıcı genişliği daraltılınca flex-shrink değeri 2 olarak belirlenen kutu daha fazla büzülecektir. Uyumlu web siteleri yaparken işe yarar bu özellik.

flex-shrink yapısı

Yapısı: flex-shrink: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 1
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

Verdiğim değer hiçbir şekilde değişmesin istiyorsanız flex-shrink:0; değerini vermeniz gerekiyor.

Flexbox kullanırken bir projede karşılaştığım bugı çözmek için arayış içindeyken Adem İlter’in YouTube’da Flexbox videosu aklıma geldi. Çok güzel anlatmış bende yazıya döküyorum.