flex-growLastnost je sub-lastnost modula Fleksibilna Box postavitve.
Določa sposobnost, da se fleksibilni element po potrebi razvije. Sprejema vrednost brez enot, ki služi kot delež. Odreduje, koliko prostora v fleks posodi naj zavzame predmet.
Če so na primer vsi elementi flex-grownastavljeni na 1, bo vsak otrok znotraj vsebnika določil enako velikost. Če bi enemu od otrok dali vrednost 2, bi ta otrok zavzel dvakrat več prostora kot drugi.
Sintaksa
flex-grow: .flex-item ( flex-grow: 2; )Demo
Naslednja predstavitev prikazuje, kako se izračuna preostali prostor glede na različne vrednosti flex-grow(za boljše razumevanje glejte CodePen).
Vsi elementi imajo flex-growvrednost 1, razen tretjega, ki ima flex-growvrednost 2. To pomeni, da bo imel tretji element, ko bo razpoložljiv prostor razdeljen, dvakrat več prostora kot drugi.
Podpora za brskalnik
- (moderno) pomeni nedavno sintakso iz specifikacije (npr.
display: flex;) - (hibrid) pomeni nenavadno neuradno skladnjo iz leta 2011 (npr.
display: flexbox;) - (staro) pomeni staro skladnjo iz leta 2009 (npr.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderno) 20- (staro) | 3,1+ (staro) | 2–21 (stari) 22+ (novi) | 12,1+ (moderno) | 10+ (hibrid) | 2,1+ (staro) | 3,2+ (staro) |
Brskalnik Blackberry 10+ podpira novo sintakso.
Za več informacij o tem, kako mešati sintakse, da dobite najboljšo podporo za brskalnik, si oglejte ta članek (CSS-triki) ali ta članek (DevOpera).