Ši flex-grownuosavybė yra „Flexible Box Layout“ modulio sub-ypatybė.
Tai apibrėžia lankstaus elemento galimybę prireikus augti. Ji priima vienetinę vertę, kuri naudojama kaip proporcija. Tai nurodo, kokį kiekį laisvos vietos „flex“ talpykloje turėtų užimti daiktas.
Pvz., Jei visi elementai flex-grownustatyti į 1, kiekvienas vaikas konteinerio viduje nustatys vienodą dydį. Jei vienam iš vaikų suteiktumėte 2 vertę, tas vaikas užimtų dvigubai daugiau vietos nei kiti.
Sintaksė
flex-grow: .flex-item ( flex-grow: 2; )Demonstracija
Toliau pateiktoje demonstracijoje parodoma, kaip apskaičiuojama likusi erdvė pagal skirtingas reikšmes flex-grow(kad geriau suprastumėte, žr. „CodePen“).
Visų daiktų flex-growvertė yra 1, išskyrus trečią, kurio flex-growvertė yra 2. Tai reiškia, kad kai bus paskirstyta laisva vieta, 3-ajame lanksčiame elemente bus dvigubai daugiau vietos nei kituose.
Naršyklės palaikymas
- (moderni) reiškia naujausią sintaksę iš specifikacijos (pvz.
display: flex;) - (hibridas) reiškia nelyginę neoficialią sintaksę nuo 2011 m. (pvz.
display: flexbox;) - (senas) reiškia seną sintaksę nuo 2009 m. (pvz.
display: box;)
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 21+ (modernus) 20- (senas) | 3.1+ (senas) | 2–21 (senas) 22+ (naujas) | 12.1+ (moderni) | 10+ (hibridas) | 2.1+ (senas) | 3,2+ (senas) |
„Blackberry“ naršyklė 10+ palaiko naują sintaksę.
Norėdami gauti daugiau informacijos apie tai, kaip maišyti sintakses, kad gautumėte geriausią naršyklės palaikymą, žr. Šį straipsnį (CSS-Tricks) arba šį straipsnį (DevOpera).