flex-growProprietatea este o sub-proprietate a modulului flexibil Box Layout.
Acesta definește capacitatea unui element flexibil de a crește, dacă este necesar. Acceptă o valoare fără unitate care servește ca proporție. Acesta dictează ce cantitate de spațiu disponibil din interiorul containerului flexibil trebuie să ocupe articolul.
De exemplu, dacă toate articolele au flex-growsetat la 1, fiecare copil va seta o dimensiune egală în interiorul containerului. Dacă ar fi să acordați unuia dintre copii o valoare de 2, acel copil ar ocupa de două ori mai mult spațiu decât ceilalți.
Sintaxă
flex-grow: .flex-item ( flex-grow: 2; )Demo
Următoarea demonstrație arată cum se calculează spațiul rămas în funcție de diferitele valori ale flex-grow(a se vedea pe CodePen pentru o mai bună înțelegere).
Toate articolele au o flex-growvaloare de 1, cu excepția celui de-al treilea care are o flex-growvaloare de 2. Înseamnă că atunci când este distribuit spațiul disponibil, cel de-al treilea element flexibil va avea de două ori mai mult spațiu decât alții.
Suport pentru browser
- (modern) înseamnă sintaxa recentă din specificație (de exemplu
display: flex;) - (hibrid) înseamnă o sintaxă neoficială ciudată din 2011 (de exemplu
display: flexbox;) - (vechi) înseamnă sintaxa veche din 2009 (de exemplu
display: box;)
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (vechi) | 3.1+ (vechi) | 2-21 (vechi) 22+ (nou) | 12.1+ (modern) | 10+ (hibrid) | 2.1+ (vechi) | 3.2+ (vechi) |
Browserul Blackberry 10+ acceptă noua sintaxă.
Pentru mai multe informații despre cum să amestecați sintaxele pentru a obține cea mai bună asistență pentru browser, vă rugăm să consultați acest articol (CSS-Tricks) sau acest articol (DevOpera).