CSS flex-groei eigenschap

Definitie en gebruik

De flex-grow eigenschap bepaalt het groeimoment van het item ten opzichte van de andere flexibele items binnen dezelfde container.

Opmerking:De flex eigenschap is ongeldig als het element geen flex item is.

CSS handleiding: CSS flexbox

CSS referentiemanual:flex eigenschap

CSS referentiemanual:flex-flow eigenschap

CSS referentiemanual:flex-wrap eigenschap

HTML DOM referentiemanual:flexGrow eigenschap

Maak de breedte van het tweede flexibele item drie keer zo groot als die van de andere flexibele items:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

flex-grow: number|initial|inherit;

Waarde	Beschrijving
number	Numerieke waarde, die het groeimoment van dit item ten opzichte van de andere flexibele items regelt. Standaard is 0.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Inherit deze eigenschap van de ouderweergave. Raadpleeg inherit.

Standaardwaarde:	0
Inheritance:	Nee
Animatieproductie:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntax:	object.style.flexGrow="5"

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Volg het nummer dat voorafgaat aan -webkit-、-ms- of -moz- om de eerste versie met voorvoegsel te gebruiken die is vermeld.

Chrome	IE / Edge	Firefox	Safari	Opera
29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0