flex-growOminaisuus on osa-ominaisuus Flexible Box Asettelu moduuli.
Se määrittää joustavan tuotteen kyvyn kasvaa tarvittaessa. Se hyväksyy yksikköarvon, joka toimii suhteena. Se sanelee, kuinka suuren määrän joustosäiliön sisällä olevan tuotteen tulisi olla.
Esimerkiksi, jos kaikkien kohteiden flex-growarvoksi on asetettu 1, jokainen lapsi asettaa samankokoisen astian sisälle. Jos antaisit yhdelle lapsista arvon 2, se vie kaksi kertaa enemmän tilaa kuin muut.
Syntaksi
flex-grow: .flex-item ( flex-grow: 2; )Demo
Seuraava esittely osoittaa, kuinka jäljellä oleva tila lasketaan eri arvojen mukaan flex-grow(katso CodePenistä ymmärrystä paremmin).
Kaikkien kohteiden flex-growarvo on 1 paitsi kolmas, jonka flex-growarvo on 2. Se tarkoittaa, että kun käytettävissä oleva tila on jaettu, kolmannella joustavalla tuotteella on kaksi kertaa enemmän tilaa kuin muilla.
Selaimen tuki
- (moderni) tarkoittaa viimeisintä syntaksia spesifikaatiosta (esim.
display: flex;) - (hybridi) tarkoittaa outoa epävirallista syntaksia vuodelta 2011 (esim.
display: flexbox;) - (vanha) tarkoittaa vanhaa syntaksia vuodelta 2009 (esim.
display: box;)
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderni) 20 - (vanha) | 3.1+ (vanha) | 2-21 (vanha) 22+ (uusi) | 12.1+ (moderni) | 10+ (hybridi) | 2.1+ (vanha) | 3.2+ (vanha) |
Blackberry-selain 10+ tukee uutta syntaksia.
Lisätietoja syntaksien sekoittamisesta parhaan selaintuen saamiseksi on tässä artikkelissa (CSS-Tricks) tai tässä artikkelissa (DevOpera).