CSS joustavuus kasvu ominaisuus

Määrittely ja käyttö

flex-grow ominaisuus määrittää samassa kontissa projektin kasvun suhteessa muihin joustaviin kohtiin.

Huomautus:Jos elementti ei ole joustava elementti, flex ominaisuus on epäsyöttö

Lisää:

CSS oppitunnit: CSS joustavuuskehys

CSS viittausopas:flex ominaisuus

CSS viittausopas:flex-basis ominaisuus

CSS viittausopas:flex-direction ominaisuus

CSS viittausopas:flex-flow ominaisuus

CSS viittausopas:flex-shrink ominaisuus

CSS viittausopas:flex-wrap ominaisuus

HTML DOM viittausopas:flexGrow ominaisuus

Esimerkki

Tee toisen joustavan elementin leveys kolme kertaa suuremmaksi kuin muiden joustavien elementtien:

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

Kokeile itse

CSS syntaksi

flex-grow: number|initial|inherit;

Ominaisuusarvo

Arvo Kuvaus
number Lukuarvo, joka määrittää tätä hanketta suhteessa muihin joustaviin kohtiin. Oletusarvo on 0.
initial Aseta tämä ominaisuus sen oletusarvon arvon. Katso: initial.
inherit Periisi isäntäelementistä tämän ominaisuuden. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: 0
Perintä: Ei
Animaatioiden luominen: Tuki. Katso:Animaatiotutkijat.
Versio: CSS3
JavaScript syntaksi: object.style.flexGrow="5"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee täyttä ominaisuutta.

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta. Käytä etuliitteitä -webkit-, -ms- tai -moz- ensimmäisen version määrittämiseen ennen numeroa.

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