Proprietà CSS flex-direction

La proprietà flex-direction imposta l'asse principale di un contenitore flex, ovvero la direzione lungo la quale vengono disposti gli elementi flex. Alternando l'asse principale tra orizzontale e verticale (con la possibilità di invertirlo), una singola proprietà controlla se gli elementi scorrono in riga o in colonna. È una delle proprietà CSS3 e fa parte del modulo Flexible Box Layout.

La proprietà non ha effetto da sola — l'elemento deve prima essere un contenitore flex, che si crea con display: flex (o inline-flex). Una volta impostato, ogni figlio diretto diventa un elemento flex che segue la direzione scelta.

Gli elementi flex possono essere visualizzati:

orizzontalmente da sinistra a destra (flex-direction: row) o da destra a sinistra (flex-direction: row-reverse)
verticalmente dall'alto verso il basso (flex-direction: column) o dal basso verso l'alto (flex-direction: column-reverse)

Asse principale e asse trasversale

Flexbox lavora sempre con due assi. L'asse principale è quello scelto da flex-direction; gli elementi vengono posizionati uno dopo l'altro lungo di esso. L'asse trasversale è perpendicolare ad esso. Questo è importante perché le proprietà di allineamento dipendono da quale asse è quale:

justify-content allinea gli elementi lungo l'asse principale.
align-items allinea gli elementi lungo l'asse trasversale.

Quindi quando si imposta flex-direction: column, l'asse principale diventa verticale — e justify-content controlla il posizionamento verticale mentre align-items controlla il posizionamento orizzontale. Usare quella sbagliata è l'errore più comune con Flexbox, e quasi sempre si riconduce al valore di flex-direction attivo.

I valori *-reverse invertono l'ordine in cui gli elementi vengono renderizzati, ma non cambiano l'ordine nel sorgente HTML — aspetto importante per l'accessibilità, poiché i lettori di schermo e il focus da tastiera seguono ancora l'ordine del DOM, non quello visivo.

Informazione

Se non ci sono elementi flex (il contenitore non ha figli diretti), la proprietà flex-direction non produce alcun effetto visibile.

Valore iniziale	row
Si applica a	Contenitori flex.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.flexDirection = "row-reverse";

Sintassi

Sintassi della proprietà CSS flex-direction

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

Esempio della proprietà flex-direction:

Esempio della proprietà CSS flex-direction con il valore column-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Nell'esempio seguente, gli elementi vengono visualizzati orizzontalmente come una riga da destra a sinistra.

Esempio della proprietà flex-direction con il valore "row-reverse":

Esempio della proprietà CSS flex-direction con il valore row-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

L'immagine seguente mostra gli elementi visualizzati in ordine inverso da destra a sinistra.

Esempio della proprietà flex-direction con il valore "row":

Esempio della proprietà flex-direction con il valore "row"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà flex-direction con il valore "column":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà flex-direction con il valore "column-reverse":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Quando usare ciascun valore

row (predefinito) — barre di navigazione orizzontali, gruppi di pulsanti e qualsiasi "elenco di elementi da sinistra a destra." Si scrive raramente esplicitamente poiché è già il valore predefinito.
column — impilare card, campi di form o elementi della barra laterale verticalmente, mantenendo comunque il controllo di allineamento e gap di Flexbox. Un pattern comune è un layout a pagina intera: display: flex; flex-direction: column; min-height: 100vh con un'intestazione, un'area principale con flex: 1, e un footer.
row-reverse / column-reverse — invertire l'ordine visivo senza toccare l'HTML, ad esempio per rispecchiare un layout per lingue da destra a sinistra o mostrare il messaggio di chat più recente in basso mantenendo il DOM in ordine cronologico.

Una shorthand correlata, flex-flow, imposta flex-direction e flex-wrap in un'unica dichiarazione — comoda quando si ha bisogno anche che gli elementi vadano a capo su più righe.

Supporto browser

flex-direction è supportata in tutti i browser moderni senza prefisso vendor. Fa parte del modello Flexbox più ampio trattato nella Guida Definitiva a Flexbox.

Valori

Valore	Descrizione	Provala
row	Gli elementi vengono visualizzati orizzontalmente come una riga. Questo è il valore predefinito della proprietà.	Provala »
row-reverse	Gli elementi vengono visualizzati in una riga in ordine inverso (da destra a sinistra).	Provala »
column	Gli elementi vengono visualizzati verticalmente dall'alto verso il basso.	Provala »
column-reverse	Gli elementi vengono visualizzati verticalmente dal basso verso l'alto.	Provala »
initial	La proprietà usa il suo valore predefinito.	Provala »
inherit	La proprietà eredita il valore dall'elemento genitore.	Provala »

Esercitazione

Pratica

Quali dei seguenti sono valori validi per la proprietà CSS flex-direction?