De flex-groweigenschap is een subeigenschap van de module Flexible Box Layout.
Het definieert de mogelijkheid voor een flexitem om indien nodig te groeien. Het accepteert een eenheidsloze waarde die als een verhouding dient. Het bepaalt hoeveel van de beschikbare ruimte in de flexcontainer het item moet innemen.
Als alle items bijvoorbeeld zijn flex-growingesteld op 1, wordt elk kind in de container op dezelfde grootte ingesteld. Als u een van de kinderen de waarde 2 zou geven, neemt dat kind twee keer zoveel ruimte in beslag als de anderen.
Syntaxis
flex-grow: .flex-item ( flex-grow: 2; )Demo
De volgende demo laat zien hoe de resterende ruimte wordt berekend op basis van de verschillende waarden van flex-grow(zie CodePen voor een beter begrip).
Alle items hebben een flex-growwaarde van 1 behalve de 3e die een flex-growwaarde heeft van 2. Dit betekent dat wanneer de beschikbare ruimte wordt verdeeld, het 3e flex-item twee keer zoveel ruimte heeft als andere.
Browser-ondersteuning
- (modern) betekent de recente syntaxis van de specificatie (bijv.
display: flex;) - (hybride) betekent een vreemde onofficiële syntaxis uit 2011 (bijv.
display: flexbox;) - (oud) betekent de oude syntaxis van 2009 (bijv.
display: box;)
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (oud) | 3.1+ (oud) | 2-21 (oud) 22+ (nieuw) | 12.1+ (modern) | 10+ (hybride) | 2.1+ (oud) | 3.2+ (oud) |
Blackberry browser 10+ ondersteunt de nieuwe syntaxis.
Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.