Esempio
Che tutti gli elementi flessibili siano della stessa lunghezza, regardles del suo contenuto:
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
} Prova tu stesso " Definizione e utilizzo
La proprietà flex specifica la lunghezza dell'elemento, rispetto al resto degli elementi flessibili all'interno dello stesso contenitore.
La proprietà flex è una scorciatoia per i-flex crescere, flex-shrink, e la flessione-base proprietà.
Note: Se l'elemento non è un elemento flessibile, la proprietà flex non ha alcun effetto.
| Valore di default: | 0 1 auto |
|---|---|
| Inherited: | no |
| animatable: | yes, see individual properties . Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.flex="1" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -MS- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| flex | 29,0 21,0 -webkit- | 11.0 10.0 -MS- | 28.0 18,0 -moz- | 9.0 6.1 -webkit- | 17,0 |
CSS Sintassi
flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;I valori delle proprietà
| Valore | Descrizione |
|---|---|
| flex-grow | Un numero che specifica quanto l'elemento crescerà rispetto al resto degli elementi flessibili |
| flex-shrink | Un numero che specifica quanto l'articolo si ridurrà rispetto al resto degli elementi flessibili |
| flex-basis | La lunghezza dell'elemento. I valori legali: "auto" , "inherit" , o di un numero seguito da "%" , "px" , "em" o qualsiasi altra unità di lunghezza |
| auto | Uguale a 1 1 auto. |
| initial | Uguale a 0 1 auto. Leggi iniziale |
| none | Uguale a 0 0 auto. |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Pagine correlate
CSS Riferimento: flex-basis property
CSS Riferimento: flex-direction property
CSS Riferimento: flex-flow property
CSS Riferimento: flex-grow property
CSS Riferimento: flex-shrink property
CSS Riferimento: flex-wrap property
Di riferimento HTML DOM: flex property