La flex-growproprietà è una proprietà secondaria del modulo Layout riquadro flessibile.
Definisce la capacità di un elemento flessibile di crescere se necessario. Accetta un valore senza unità che funge da proporzione. Determina la quantità di spazio disponibile all'interno del contenitore flessibile che l'elemento deve occupare.
Ad esempio, se tutti gli elementi sono flex-growimpostati su 1, ogni figlio verrà impostato su una dimensione uguale all'interno del contenitore. Se dovessi dare a uno dei bambini un valore di 2, quel bambino occuperebbe il doppio dello spazio degli altri.
Sintassi
flex-grow: .flex-item ( flex-grow: 2; )Demo
La seguente demo mostra come viene calcolato lo spazio rimanente in base ai diversi valori di flex-grow(vedere su CodePen per una migliore comprensione).
Tutti gli elementi hanno un flex-growvalore di 1 tranne il terzo che ha un flex-growvalore di 2. Significa che quando lo spazio disponibile è distribuito, il terzo elemento flessibile avrà il doppio dello spazio degli altri.
Supporto browser
- (moderno) indica la sintassi recente dalla specifica (ad esempio
display: flex;) - (ibrido) indica una strana sintassi non ufficiale del 2011 (es.
display: flexbox;) - (vecchio) indica la vecchia sintassi del 2009 (ad esempio
display: box;)
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderno) 20- (vecchio) | 3.1+ (vecchio) | 2-21 (vecchio) 22+ (nuovo) | 12.1+ (moderno) | 10+ (ibrido) | 2.1+ (vecchio) | 3.2+ (vecchio) |
Il browser Blackberry 10+ supporta la nuova sintassi.
Per ulteriori informazioni su come mescolare le sintassi per ottenere il miglior supporto del browser, fare riferimento a questo articolo (CSS-Tricks) o questo articolo (DevOpera).