Properti flex-shrinkini adalah sub-hak milik modul Flexible Box Layout.
Ini menentukan "faktor shrink flex", yang menentukan berapa banyak item flex akan menyusut berbanding dengan item flex yang lain dalam wadah flex ketika tidak ada cukup ruang di baris.
Apabila dihilangkan, ia diatur ke 1dan faktor pengecutan flex dikalikan dengan dasar lentur ketika mengedarkan ruang negatif.
Sintaks
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Untuk melihat potensi penuh demo ini, anda harus dapat mengubah ukuran lebarnya, jadi sila lihat langsung di CodePen.
Dalam demo ini:
- Item pertama mempunyai
flex: 1 1 20em(singkatan untukflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Perkara kedua mempunyai
flex: 2 2 20em(singkatan untukflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Kedua-dua item flex mahu selebar 20em. Kerana flex-grow (parameter pertama), jika wadah flex lebih besar dari 40em, anak ke-2 akan mengambil ruang sisa dua kali lebih banyak daripada anak pertama. Tetapi jika elemen induk selebar kurang dari 40em, maka anak ke-2 akan dicukur dua kali lebih banyak daripada anak pertama, menjadikannya kelihatan lebih kecil (kerana parameter ke-2, flex-shrink).
Sokongan Penyemak Imbas
- (moden) bermaksud sintaks terbaru dari spesifikasi (contohnya
display: flex;) - (hibrid) bermaksud sintaksis tidak rasmi yang ganjil dari 2011 (mis.
display: flexbox;) - (lama) bermaksud sintaks lama dari 2009 (mis.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moden) 20- (lama) | 3.1+ (lama) | 2-21 (lama) 22+ (baru) | 12.1+ (moden) | 10+ (kacukan) | 2.1+ (lama) | 3.2+ (lama) |
Penyemak imbas Blackberry 10+ menyokong sintaks baru.
Untuk maklumat lebih lanjut mengenai cara mencampurkan sintaks untuk mendapatkan sokongan penyemak imbas terbaik, sila rujuk artikel ini (Trik CSS) atau artikel ini (DevOpera).