Flex Shrink CSS Özellikleri

flex-shrink esnek bir kutu içerisindeki öğelerin küçülme ya da büzülme faktörünü ayarlar. Esnek bir kutu içerisindeki tüm öğelerin boyutları esnek öğenin boyutundan büyük ise öğeler flex-shrink değerlerine göre küçülür.

flex-shrink büyüme faktörü flex-grow ve flex-basis ile birlikte kullanılır.

flex-shrink:0; diye esnek kap içindeki bir öğeye belirtildiğinde o öğe büzülmeden diğer öğeler esnek kutudaki kalan alana göre büzülecektir.

flex-shrink Değerleri

• flex-shrink başlangıç değeri "1".
• Sayı değeri alabilir ve -1 gibi negatif satı değeri alamaz.
• flex-shrink: 1.5; gibi ondalıklı bir sayı değeri alabilir.

/* Sayı Değerleri */
flex-shrink: 0; 
flex-shrink: 1;  /* Varsayılan Değeri */
flex-shrink: 2.5; 
flex-shrink: 5; 
/* Global Değerleri */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: unset;
                

flex-shrink Örneği

Yukarıdaki örnekte tüm esnek öğelerin flex-basis değerleri 500px ayarlanmıştır. flex-shrink:0; diye belirtilen öğede büzülme olamadığı gibi diğer varsayılan flex-shrink:1; değerine sahip olan öğelerde esnek kutuda kalan alana göre büzülme gerçekleştirecektir.