Proprietà flex-grow CSS

Corso raccomandato:

Definizione e uso

Proprietà flex-grow: determina l'aumento di questo progetto rispetto agli altri progetti in un contenitore identico.Nota:

Se l'elemento non è un progetto elastico, l'attributo flex non è valido.

Vedi anche: Tutorial CSS:

Proprietà flex-shrinkCasella di dialogo CSS

Proprietà flex-shrinkProprietà flex

Proprietà flex-shrinkProprietà flex-basis

Proprietà flex-shrinkProprietà flex-direction

Proprietà flex-shrinkProprietà flex-flow

Proprietà flex-shrinkManuale CSS:

Proprietà flex-wrapManuale HTML DOM:

Proprietà flexGrow

Esempio

Fai in modo che la larghezza del secondo progetto elastico sia tre volte quella degli altri progetti elastiche:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}

div:nth-of-type(3) {flex-grow: 1;}

Prova tu stesso

Sintassi CSS Descrizioneflex-grow:

|initial|inherit;

Valore dell'attributo Valore
Descrizione number
Imposta questo attributo al suo valore predefinito. Vedi: Valore numerico, che determina l'aumento di questo progetto rispetto agli altri progetti elastiche. Il valore predefinito è 0. Imposta questo attributo al suo valore predefinito. Vedi:Proprietà correlate agli animazioni
Eredita questo attributo dal suo elemento padre. Vedi: initial Eredita questo attributo dal suo elemento padre. Vedi:Proprietà correlate agli animazioni

inherit

Dettagli tecnici Valore predefinito:
0 Ereditarietà:
No Produzione di animazioni:Supportato. Vedi:Proprietà correlate agli animazioni
。 Versione:
CSS3 Sintassi JavaScript:

object.style.flexGrow="5"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta l'attributo per la prima volta. Utilizzare i prefissi -webkit-, -ms- o -moz- di seguito al numero.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0