flex-shrinkMülkiyet Esnek Kutu Düzeni modülünün bir alt özelliktir.
Satırda yeterli alan olmadığında esnek öğenin esnek kapsayıcıdaki diğer esnek öğelere göre ne kadar küçüleceğini belirleyen "esnek küçültme faktörünü" belirtir.
İhmal edildiğinde, olarak ayarlanır 1ve esnek büzülme faktörü, negatif boşluk dağıtılırken esnek temeli ile çarpılır.
Sözdizimi
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Bu demonun tam potansiyelini görmek için genişliğini yeniden boyutlandırmanız gerekir, bu yüzden lütfen doğrudan CodePen'de bir göz atın.
Bu demoda:
- İlk madde vardır
flex: 1 1 20em(stenografi içinflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - İkinci öğe vardır
flex: 2 2 20em(stenografi içinflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Her iki esnek öğe de 20em genişliğinde olmak istiyor. Flex-Grow (ilk parametre) nedeniyle, eğer esnek konteyner 40em'den büyükse, 2. çocuk, ilk çocuktan iki kat fazla artık alan alacaktır. Ancak ana öğe 40 metreden daha az genişlikte ise, o zaman 2. çocuk 1. çocuğa göre iki kat daha fazla tıraş olur ve bu da onu daha küçük gösterir (2. parametre nedeniyle, flex-shrink).
Tarayıcı Desteği
- (modern), spesifikasyondaki son sözdizimi anlamına gelir (örneğin
display: flex;) - (karma), 2011'den kalma garip bir resmi olmayan sözdizimi anlamına gelir (örneğin
display: flexbox;) - (eski), 2009'daki eski sözdizimi anlamına gelir (örneğin
display: box;)
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (eski) | 3.1+ (eski) | 2-21 (eski) 22+ (yeni) | 12.1+ (modern) | 10+ (karma) | 2.1+ (eski) | 3.2+ (eski) |
Blackberry tarayıcı 10+ yeni sözdizimini destekler.
En iyi tarayıcı desteğini elde etmek için sözdizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için, lütfen bu makaleye (CSS Hileleri) veya bu makaleye (DevOpera) bakın.