Den flex-growegenskab er en sub-egenskab af Flexible Box layout modul.
Det definerer evnen til, at et fleksibelt element kan vokse, hvis det er nødvendigt. Den accepterer en enhedsløs værdi, der fungerer som en andel. Det dikterer, hvor meget af den ledige plads inde i flexcontaineren, varen skal tage op.
For eksempel, hvis alle varer er flex-growindstillet til 1, indstiller hvert barn til samme størrelse inde i containeren. Hvis du skulle give et af børnene en værdi på 2, ville det barn tage dobbelt så meget plads som de andre.
Syntaks
flex-grow: .flex-item ( flex-grow: 2; )Demo
Den følgende demo viser, hvordan den resterende plads beregnes i henhold til de forskellige værdier af flex-grow(se på CodePen for bedre forståelse).
Alle varer har en flex-growværdi på 1 undtagen den tredje, der har en flex-growværdi på 2. Det betyder, at når den ledige plads fordeles, vil den tredje flex-artikel have dobbelt så meget plads som andre.
Browsersupport
- (moderne) betyder den nylige syntaks fra specifikationen (f.eks.
display: flex;) - (hybrid) betyder en ulige uofficiel syntaks fra 2011 (f.eks.
display: flexbox;) - (gammel) betyder den gamle syntaks fra 2009 (f.eks.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (gamle) | 3.1+ (gammel) | 2-21 (gammel) 22+ (ny) | 12.1+ (moderne) | 10+ (hybrid) | 2.1+ (gammel) | 3.2+ (gammel) |
Blackberry browser 10+ understøtter den nye syntaks.
For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).