CSS flex-grow egenskab

Definition og brug

flex-grow-egenskaben definerer mængden af vækst for projektet i forhold til de øvrige elastiske projekter i samme beholder.

Kommentarer:Hvis elementet ikke er et elastisk projekt, er flex-egenskaben ugyldig.

Se også:

CSS tutorial: CSS elastisk ramme

CSS Reference Manual:flex-egenskaben

CSS Reference Manual:flex-basis-egenskaben

CSS Reference Manual:flex-direction-egenskaben

CSS Reference Manual:flex-flow-egenskaben

CSS Reference Manual:flex-shrink-egenskaben

CSS Reference Manual:flex-wrap-egenskaben

HTML DOM Reference Manual:flexGrow-egenskaben

Eksempel

Lad den anden elastiske projektets bredde blive tre gange så bred som de øvrige elastiske projekter:

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

Prøv det selv

CSS-syntaks

flex-grow: number|initial|inherit;

Egenskabsværdi

Værdi Beskrivelse
number Numerisk værdi, der angiver mængden af vækst for dette projekt i forhold til de øvrige elastiske projekter. Standard er 0.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi: 0
Arv: Nej
Animationproduktion: Understøttet. Se:Animationrelaterede egenskaber.
Version: CSS3
JavaScript-syntaks: object.style.flexGrow="5"

Browserunderstøttelse

Tabellen viser den første browserversion, der fuldt ud understøtter egenskaben.

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben. Følg -webkit-、-ms- eller -moz- tal for at bruge præfikset for den første version.

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