flex-growVara on sub-vara Paindlik Box paigutus moodul.
See määratleb painduva eseme võime vajadusel kasvada. See aktsepteerib ühikuta väärtust, mida kasutatakse proportsioonina. See dikteerib, kui suure osa paindmahuti sees olevast ruumist peaks ese võtma.
Näiteks kui kõigi üksuste väärtuseks on flex-growseatud 1, määrab iga laps konteineri sees võrdse suuruse. Kui annaksite ühele lapsele väärtuse 2, võtaks see laps kaks korda rohkem ruumi kui teised.
Süntaks
flex-grow: .flex-item ( flex-grow: 2; )Demo
Järgmine demo näitab, kuidas järelejäänud ruumi arvutatakse vastavalt erinevatele väärtustele flex-grow(paremaks mõistmiseks vaadake CodePenil).
Kõigil üksustel on flex-growväärtus 1, välja arvatud kolmandal, mille flex-growväärtus on 2. See tähendab, et kui vaba ruumi jagatakse, on 3. paindlikul elemendil kaks korda rohkem ruumi kui teistel.
Brauseri tugi
- (kaasaegne) tähendab spetsifikatsiooni hiljutist süntaksit (nt
display: flex;) - (hübriid) - paaritu mitteametlik süntaks aastast 2011 (nt
display: flexbox;) - (vana) tähendab vana süntaksit aastast 2009 (nt
display: box;)
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (kaasaegne) 20 - (vana) | 3.1+ (vana) | 2–21 (vana) 22+ (uus) | 12,1+ (kaasaegne) | 10+ (hübriid) | 2.1+ (vana) | 3,2+ (vana) |
Blackberry brauser 10+ toetab uut süntaksit.
Lisateavet süntaksi segamise kohta, et saada parim brauseritugi, leiate sellest artiklist (CSS-trikid) või sellest artiklist (DevOpera).