The flex-shrinkproperti adalah sub-properti dari modul Fleksibel Box Layout.
Ini menentukan "faktor penyusutan fleksibel", yang menentukan seberapa banyak item flex akan menyusut relatif terhadap item flex lainnya dalam penampung flex ketika tidak ada cukup ruang pada baris.
Saat dihilangkan, ini disetel ke 1dan faktor penyusutan fleksibel dikalikan dengan basis fleksibel saat mendistribusikan ruang negatif.
Sintaksis
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Untuk melihat potensi penuh dari demo ini, Anda harus dapat mengubah ukuran lebarnya, jadi silakan lihat langsung di CodePen.
Dalam demo ini:
- Item pertama memiliki
flex: 1 1 20em(singkatan untukflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Item kedua memiliki
flex: 2 2 20em(singkatan untukflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Kedua item flex ingin memiliki lebar 20em. Karena flex-grow (parameter pertama), jika wadah flex lebih besar dari 40em, anak ke-2 akan mengambil ruang sisa dua kali lebih banyak dari anak pertama. Tetapi jika elemen induk kurang dari 40em lebarnya, maka anak kedua akan dicukur dua kali lebih banyak dari anak pertama, membuatnya terlihat lebih kecil (karena parameter ke-2, flex-shrink).
Dukungan Browser
- (modern) berarti sintaks terbaru dari spesifikasi (misalnya
display: flex;) - (hybrid) berarti sintaks tidak resmi ganjil dari 2011 (misalnya
display: flexbox;) - (lama) berarti sintaks lama dari 2009 (misalnya
display: box;)
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (lama) | 3.1+ (lama) | 2-21 (lama) 22+ (baru) | 12.1+ (modern) | 10+ (hibrida) | 2.1+ (lama) | 3,2+ (lama) |
Browser Blackberry 10+ mendukung sintaks baru.
Untuk informasi lebih lanjut tentang cara mencampur sintaks untuk mendapatkan dukungan browser terbaik, silakan lihat artikel ini (Trik CSS) atau artikel ini (DevOpera).