The flex-growproperti adalah sub-properti dari modul Fleksibel Box Layout.
Ini menentukan kemampuan item fleksibel untuk berkembang jika perlu. Ini menerima nilai tak bersatuan yang berfungsi sebagai proporsi. Ini menentukan berapa jumlah ruang yang tersedia di dalam wadah fleksibel yang harus diambil item tersebut.
Misalnya, jika semua item flex-growdisetel ke 1, setiap anak akan disetel ke ukuran yang sama di dalam penampung. Jika Anda memberi salah satu anak nilai 2, anak itu akan menghabiskan ruang dua kali lebih banyak dari yang lain.
Sintaksis
flex-grow: .flex-item ( flex-grow: 2; )Demo
Demo berikut menunjukkan bagaimana sisa ruang dihitung menurut nilai yang berbeda flex-grow(lihat di CodePen untuk pemahaman yang lebih baik).
Semua item memiliki flex-grownilai 1 kecuali yang ke-3 yang memiliki flex-grownilai 2. Ini berarti ketika ruang yang tersedia didistribusikan, item-fleksibel ke-3 akan memiliki ruang dua kali lebih banyak dari yang lain.
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).