Az flex-growingatlan a Flexible Box Layout modul egyik al-tulajdonsága.
Meghatározza a rugalmas elem növekedésének képességét, ha szükséges. Elfogad egy arány nélküli érték nélküli értéket. Meghatározza, hogy a rugalmas tartály belsejében mekkora helyet szabad az elemnek elfoglalnia.
Például, ha az összes elem flex-grow1-re van állítva, akkor minden gyermek azonos méretűre állítja be a tartályt. Ha az egyik gyermeknek 2 értéket adna, akkor ez a gyermek kétszer annyi helyet foglal el, mint a többi.
Szintaxis
flex-grow: .flex-item ( flex-grow: 2; )Demó
A következő bemutató bemutatja, hogyan számolják a fennmaradó helyet a különböző értékek szerint flex-grow(a jobb megértésért lásd: CodePen
Minden elem flex-growértéke 1, kivéve a harmadik elemet, amelynek értéke flex-grow2. Ez azt jelenti, hogy amikor a rendelkezésre álló terület fel van osztva, akkor a 3. flex-elem kétszer annyi helyet kap, mint mások.
Böngésző támogatás
- (modern): a specifikáció legújabb szintaxisa (pl.
display: flex;) - (hibrid) furcsa, nem hivatalos szintaxist jelent 2011-től (pl.
display: flexbox;) - (régi) a 2009-es régi szintaxist jelenti (pl.
display: box;)
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20 - (régi) | 3.1+ (régi) | 2–21 (régi) 22+ (új) | 12,1+ (modern) | 10+ (hibrid) | 2.1+ (régi) | 3,2+ (régi) |
A Blackberry 10+ böngésző támogatja az új szintaxist.
A szintaxisok keverésével kapcsolatos további információkért a legjobb böngésző-támogatás érdekében olvassa el ezt a cikket (CSS-trükkök) vagy ezt a cikket (DevOpera).