Proprietà flex CSS

Definizione e uso

Flex è l'abbreviazione degli attributi seguenti:

La configurazione flex è la lunghezza elastica degli oggetti flessibili.

Commento:Se l'elemento non è un oggetto flessibile, l'attributo flex non è valido.

Vedere anche:

Tutorial: Casella elastica CSS

Riferimento:Proprietà flex-basis CSS

Riferimento:Proprietà flex-direction CSS

Riferimento:Proprietà flex-flow CSS

Riferimento:Proprietà flex-grow CSS

Riferimento:Proprietà flex-shrink CSS

Riferimento:Proprietà flex-wrap CSS

Riferimento:Proprietà flex dell'HTML DOM

Esempio

Fai in modo che la lunghezza di tutti gli elementi elasticiti sia la stessa, indipendentemente dal loro contenuto:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Prova personalmente

Sintassi CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Valore dell'attributo

Valore Descrizione
flex-grow Numero, che determina la quantità di espansione dell'elemento rispetto agli altri elementi elasticiti.
flex-shrink Numero, che determina la quantità di contrazione dell'elemento rispetto agli altri elementi elasticiti.
flex-basis

Lunghezza dell'elemento.

Valori validi: "auto"、"inherit" o valori in unità di "%", "px", "em" o qualsiasi altra unità di lunghezza.
auto Uguale a 1 1 auto.
initial Uguale a 0 1 auto. Vedi initial。
none Uguale a 0 0 auto.
inherit Eredita l'attributo dal suo elemento padre. Vedi inherit。

Dettagli tecnici

Valore predefinito: 0 1 auto
Ereditarietà: No
Produzione di animazioni: Supportato. Vedi le proprietà separate. Vedi:Proprietà correlate agli animazioni。
Versione: CSS3
Sintassi JavaScript: object.style.flex="1"

Più esempi

Combina flex e query media per creare diversi layout per diverse dimensioni di schermo/dispositivi:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Layout responsive - crea una singola colonna (100％) invece di una colonna a due (50％) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Prova personalmente

Supporto del browser

I numeri nella tabella indicano la prima versione del browser che supporta completamente l'attributo.

I numeri con -webkit-、-ms- o -moz- come prefisso rappresentano la prima versione utilizzata con il prefisso.

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