Proprietà flex-direction CSS

Definizione e uso

L'attributo flex-direction determina la direzione degli elementi elastici.

Nota:Se l'elemento non è un progetto elastico, l'attributo flex è invalido.

Vedi anche:

Tutorial CSS:Casella flessibile CSS

Manuale CSS:Proprietà flex

Manuale CSS:Proprietà flex-basis

Manuale CSS:Proprietà flex-flow

Manuale CSS:Proprietà flex-grow

Manuale CSS:Proprietà flex-shrink

Manuale CSS:Proprietà flex-wrap

Manuale HTML DOM:Proprietà flexDirection

Esempio

Imposta la direzione degli elementi flessibili all'interno dell'elemento <div> in modo inverso:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Prova te stesso

Sintassi CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Valore dell'attributo

Valore Descrizione
row Valore predefinito. Come una riga, visualizza orizzontalmente gli elementi flessibili.
row-reverse Uguale alle righe, ma nella direzione opposta.
column Come colonne, visualizza verticalmente gli elementi flessibili.
column-reverse Uguale alle colonne, ma nella direzione opposta.
initial Imposta questo attributo al suo valore predefinito. Vedi initial。
inherit Eredita questo attributo dal suo elemento padre. Vedi inherit。

Dettagli tecnici

Valore predefinito: row
Ereditarietà: No
Creazione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni。
Versione: CSS3
Sintassi JavaScript: object.style.flexDirection="column-reverse"

Più esempi

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

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Layout responsiveness - crea una layout a singola colonna (100％) invece di una layout a due colonne (50％) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Prova te stesso

Supporto del browser

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

I numeri con -webkit- o -moz- rappresentano la prima versione che utilizza il prefisso.

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