CSS flex-shrink özelliği, bir flex kutusunun içindeki öğelerin ne kadar küçültülebileceğini belirler. Bu özellik, bir sayı değeri alır ve varsayılan değeri 1'dir.

Aşağıdaki örnek, bir flex kutusunun içindeki öğelerin %50 oranında küçültülebileceğini göstermektedir.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0.5;
}

• Eğer flex-shrink değeri 1 ise, flex öğeleri boyutlarını muhafaza ederler ve eğer alan yetersiz ise sadece birbirlerine sığarlar.
• Eğer flex-shrink değeri 0.5 ise, flex öğeleri boyutlarını yarısına kadar küçültürler ve eğer alan yetersiz ise sadece birbirlerine sığarlar.
• Eğer flex-shrink değeri 0 ise, flex öğeleri boyutlarını muhafaza eder ve eğer alan yetersiz ise öğelerin bir kısmı görünmez olur.

Bu özellik, genellikle ekran boyutları gibi belirli bir alana sığması gereken sayfalarda kullanılır. Örneğin, bir mobil cihazda görüntülenen bir sayfada, ekran boyutları küçültüldüğünde flex kutusunun içindeki öğelerin ne kadar küçültülebileceğini belirlemek için flex-shrink özelliği kullanılabilir.

• Not: flex-shrink özelliği flex öğelerinde kullanılır. Örnekteki kullanımı flex container öğesinde kullanılır.