English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La proprietà CSS flex-grow specifica il modo in cui un oggetto flex cresce rispetto agli altri oggetti all'interno del contenitore flex.
La tabella sottostante fornisce una descrizione dell'uso di questa proprietà e la cronologia delle versioni, nonché la sintassi di utilizzo di questa proprietà nei script JavaScript.
| Valore predefinito: | 0 |
|---|---|
| Adatto a: | Elementi elastici |
| Ereditarietà: | Nessuno |
| Animabile: | Sì.Rif.: Proprietà animazione. |
| Versione: | Nuova funzione CSS3 |
| Sintassi JavaScript: | Oggetto.style.flexGrow="1" |
La sintassi di questa proprietà è la seguente:
flex-grow: number | initial | inherit
Il seguente esempio dimostra come utilizzare la proprietà flex-grow.
.flex-container {
display: flex;
}
.item1 {
width: 100px;
background: #ff80c0;
-webkit-flex-grow: 1; /* Safari 6.1+ */
flex-grow: 1;
}
.item2 {
width: 100px;
background: #8080ff;
-webkit-flex-grow: 3; /* Safari 6.1+ */
flex-grow: 3;
}
.item3 {
width: 100px;
background:#0080ff;
-webkit-flex-grow: 5; /* Safari 6.1+ */
flex-grow: 5;
}Prova a vedere‹/›La tabella di seguito descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| number | Un numero positivo utilizzato per determinare la crescita elastica dell'elemento.Crescita elasticaCoefficiente. Il valore predefinito è 0. I numeri negativi non sono validi. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato adotta il valore di flex-grow dell'elemento padre. |
Compatibilità dei browser per la proprietà flex-grow, i numeri nella tabella rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:Layout a colonne del CSS3.
Proprietà correlate:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.