Den flex-growegenskapen er en under egenskap av Flexible Box Layout modul.
Den definerer muligheten for at et fleksibelt element kan vokse om nødvendig. Den aksepterer en enhetsløs verdi som fungerer som en andel. Det dikterer hvor mye ledig plass inne i flexcontaineren varen skal ta opp.
For eksempel, hvis alle elementene er flex-growsatt til 1, vil hvert barn sette til samme størrelse inne i containeren. Hvis du skulle gi et av barna verdien 2, ville det barnet ta dobbelt så mye plass som de andre.
Syntaks
flex-grow: .flex-item ( flex-grow: 2; )Demo
Følgende demo viser hvordan gjenværende plass beregnes i henhold til de forskjellige verdiene av flex-grow(se på CodePen for bedre forståelse).
Alle elementene har flex-growverdien 1 bortsett fra den tredje som har flex-growverdien 2. Det betyr at når den ledige plassen fordeles, vil den tredje flex-elementen ha dobbelt så mye plass som andre.
Nettleserstøtte
- (moderne) betyr den nylige syntaksen fra spesifikasjonen (f.eks.
display: flex;) - (hybrid) betyr en merkelig uoffisiell syntaks fra 2011 (f.eks.
display: flexbox;) - (gammel) betyr den gamle syntaksen fra 2009 (f.eks.
display: box;)
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (gammel) | 3.1+ (gammel) | 2-21 (gammel) 22+ (ny) | 12.1+ (moderne) | 10+ (hybrid) | 2.1+ (gammel) | 3.2+ (gammel) |
Blackberry browser 10+ støtter den nye syntaksen.
For mer informasjon om hvordan du blander syntakser for å få best nettleserstøtte, se denne artikkelen (CSS-Tricks) eller denne artikkelen (DevOpera).