flex-grow
Nekretnina je pod-vlasništvo Fleksibilna Box Izgled modula.
Definira sposobnost da flex element raste ako je potrebno. Prihvaća jedinstvenu vrijednost koja služi kao omjer. Diktira količinu dostupnog prostora unutar fleks spremnika koji bi trebao zauzeti predmet.
Na primjer, ako su svi predmeti flex-grow
postavljeni na 1, svako će dijete postaviti jednaku veličinu unutar spremnika. Ako biste nekome od djece dali vrijednost 2, to bi dijete zauzelo dvostruko više prostora od ostalih.
Sintaksa
flex-grow: .flex-item ( flex-grow: 2; )
Demo
Sljedeća demonstracija pokazuje kako se izračunava preostali prostor prema različitim vrijednostima flex-grow
(za bolje razumijevanje pogledajte CodePen).
Pogledajte ovu olovku!
Sve stavke imaju flex-grow
vrijednost 1, osim treće koja ima flex-grow
vrijednost 2. To znači da će, kada se raspoloživi prostor rasporedi, treća flex-stavka imati dvostruko više prostora od ostalih.
Podrška preglednika
- (moderno) znači nedavnu sintaksu iz specifikacije (npr.
display: flex;
) - (hibrid) znači neobičnu neslužbenu sintaksu iz 2011. (npr.
display: flexbox;
) - (stara) znači stara sintaksa iz 2009. (npr.
display: box;
)
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
21+ (moderno) 20- (staro) | 3,1+ (staro) | 2-21 (stari) 22+ (novi) | 12,1+ (moderno) | 10+ (hibridno) | 2,1+ (staro) | 3,2+ (staro) |
Preglednik Blackberry 10+ podržava novu sintaksu.
Za više informacija o tome kako miješati sintakse kako biste dobili najbolju podršku za preglednik, pogledajte ovaj članak (CSS-trikovi) ili ovaj članak (DevOpera).