CSS flex-grow egenskap

Rekommenderade kurser:

Definition och användning

flex-grow egenskap definierar ökningen av projektet jämfört med övriga flexibla projekt i samma container.Anmärkning:

Om elementet inte är ett flexibelt projekt är flex egenskapen ogiltig.

Se också: CSS tutorial:

flex-shrink egenskapCSS flexbox

flex-shrink egenskapflex egenskap

flex-shrink egenskapflex-basis egenskap

flex-shrink egenskapflex-direction egenskap

flex-shrink egenskapflex-flow egenskap

flex-shrink egenskapCSS referenshandbok:

flex-wrap egenskapHTML DOM referenshandbok:

flexGrow egenskap

Exempel

Låt den andra flexibla projektets bredd bli tre gånger så stor som övriga flexibla projekt:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}

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

Prova själv

CSS syntax Beskrivningflex-grow:

|initial|inherit;

Egenskapsvärde Värde
Beskrivning number
Set this property to its default value. Se vidare Numerisk värde, definierar ökningen av detta projekt jämfört med övriga flexibla projekt. Standard är 0. Set this property to its default value. Se vidareAnimation relaterade egenskaper
Inherit this property from its parent element. Se vidare initial Inherit this property from its parent element. Se vidareAnimation relaterade egenskaper

inherit

Tekniska detaljer Standardvärde:
0 Inheritance:
Nej Animation production:Support. Se vidare:Animation relaterade egenskaper
. Version:
CSS3 JavaScript syntax:

object.style.flexGrow="5"

Browsarstöd

Tal i tabellen anger den första webbläsarversion som helt stöder egenskapen. Använd prefix enligt -webkit-, -ms- eller -moz- nummer.

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