Proprietà CSS flex-grow
La proprietà flex-grow definisce quanto crescerà un elemento. Scopri i valori di questa proprietà e prova alcuni esempi.
La proprietà flex-grow controlla quanto un elemento flex cresce per riempire lo spazio libero rimasto all'interno del suo contenitore flex. Il valore è un fattore di crescita adimensionale, non una lunghezza: risponde alla domanda "quando c'è spazio in eccesso, quale parte di esso deve occupare questo elemento?"
Quando ogni elemento ha un fattore flex-grow, lo spazio rimanente viene distribuito proporzionalmente a tali fattori. La dimensione principale di un elemento flex è la sua larghezza o la sua altezza, a seconda della flex-direction: in una riga gli elementi crescono orizzontalmente, in una colonna crescono verticalmente.
Questa proprietà è una delle proprietà CSS3. Viene normalmente usata insieme a flex-shrink (come gli elementi si restringono quando lo spazio è insufficiente) e flex-basis (la dimensione di partenza), e tutte e tre vengono solitamente impostate contemporaneamente tramite la proprietà abbreviata flex.
Come viene distribuito lo spazio libero
L'algoritmo flex opera in due fasi:
- Dispone ogni elemento in base al suo
flex-basis(o alla dimensione del contenuto seflex-basis: auto). - Misura lo spazio libero — la dimensione principale del contenitore meno la somma delle dimensioni di base — e lo distribuisce in proporzione al fattore
flex-growdi ciascun elemento.
Se gli elementi sopra iniziano con larghezza quasi zero e il contenitore ha, ad esempio, 600px di spazio libero con fattori 1, 2, 1, 1, 1 (totale 6), ogni unità vale 600 / 6 = 100px. Quindi l'elemento con fattore 2 riceve 200px di crescita, mentre ogni elemento con fattore 1 riceve 100px. Raddoppiare il fattore raddoppia la quota dello spazio extra — questo non rende un elemento due volte più largo in assoluto.
flex-grow ha effetto solo quando esiste spazio libero e gli elementi sono effettivi flex item (il genitore ha display: flex o display: inline-flex). Senza spazio libero, o senza flex item, non produce alcun effetto.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Flex item, inclusi gli pseudo-elementi nel flusso. |
| Ereditato | No. |
| Animabile | Sì. Gli elementi sono animabili. |
| Versione | CSS3 |
| Sintassi DOM | object.style.flexGrow = 3; |
Sintassi
Sintassi della proprietà CSS flex-grow
flex-grow: number | initial | inherit;Esempio della proprietà flex-grow:
Esempio della proprietà CSS flex-grow con valore numerico
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 2;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Risultato
Esempio della proprietà flex-grow con un fattore di crescita maggiore:
Proprietà CSS flex-grow con un numero come valore
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Usare flex-grow all'interno della proprietà abbreviata flex
Raramente si scrive flex-grow da solo. Il pattern più comune è flex: 1, che è la forma abbreviata di flex-grow: 1; flex-shrink: 1; flex-basis: 0. Impostare la base a 0 dice al browser di ignorare la dimensione del contenuto e dividere l'intero contenitore proporzionalmente, così più elementi con flex: 1 finiscono con la stessa larghezza:
.item {
flex: 1; /* grow:1 shrink:1 basis:0 → equal columns */
}Per far sì che un elemento occupi il doppio della quota degli altri, basta aumentare il suo fattore di crescita:
.sidebar { flex: 1; }
.main { flex: 2; } /* gets 2/3 of the space, sidebar gets 1/3 */Errori comuni
- Fattore, non larghezza.
flex-grow: 2non significa "due volte più largo" — significa "doppia quota dello spazio rimanente". Quando gli elementi hanno dimensioni di contenuto diverse, le larghezze finali non saranno in un rapporto pulito 2:1 a meno cheflex-basisnon sia0. - I valori negativi non sono validi. Vengono ignorati e la proprietà mantiene il suo valore precedente.
- Nessuno spazio libero, nessun effetto. Se gli elementi riempiono già (o eccedono) il contenitore,
flex-grownon cambia nulla — quel caso è gestito invece da flex-shrink. - Il fattore è adimensionale. Non scrivere
flex-grow: 2px; non è un valore valido.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| number | Specifica quanto l'elemento crescerà rispetto agli altri elementi flessibili dello stesso contenitore. Il valore predefinito è 0. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita questa proprietà dall'elemento genitore. |