Properti flex-growini adalah sub-hak milik modul Flexible Box Layout.
Ini menentukan kemampuan untuk item lentur tumbuh jika perlu. Ia menerima nilai tanpa unit yang berfungsi sebagai bahagian. Ini menentukan berapa banyak ruang yang ada di dalam wadah flex yang harus diambil barang.
Sebagai contoh, jika semua item telah flex-growditetapkan ke 1, setiap anak akan diatur ke ukuran yang sama di dalam bekas. Sekiranya anda memberi salah satu anak itu nilai 2, anak itu akan mengambil ruang dua kali lebih banyak daripada yang lain.
Sintaks
flex-grow: .flex-item ( flex-grow: 2; )Demo
Demo berikut menunjukkan bagaimana ruang yang tinggal dikira mengikut nilai yang berbeza flex-grow(lihat di CodePen untuk pemahaman yang lebih baik).
Semua item mempunyai flex-grownilai 1 kecuali yang ketiga yang mempunyai flex-grownilai 2. Ini bermaksud apabila ruang yang ada diedarkan, item flex ke-3 akan mempunyai ruang dua kali lebih banyak daripada yang lain.
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).