flex-direction: row, row-reverse, column, column-reverse

Cambia l'asse principale del tuo layout flexbox. Vuoi i tuoi elementi affiancati o impilati?

Quando applichi display: flex a un contenitore, i suoi figli si dispongono automaticamente in riga, da sinistra a destra. Questo comportamento è controllato dalla proprietà flex-direction, che definisce l’Asse Principale (Main Axis) del contenitore.

Applicare flex-direction (sempre sul genitore) è il primo passo per definire l’orientamento del tuo layout.

1. `row` (Riga - Il default)

Se non scrivi nulla, è come se avessi scritto flex-direction: row. Gli elementi si dispongono da sinistra verso destra. L’Asse Principale è orizzontale.

.container {
  display: flex;
  flex-direction: row; /* Predefinito */
}

2. `column` (Colonna)

Questa è una variante molto comune. Anziché affiancarsi, gli elementi si impilano dall’alto verso il basso. “Ma scusa”, potresti pensare, “non è lo stesso comportamento normale del CSS senza Flexbox?” Sì, visivamente è simile, ma usando flex-direction: column ottieni accesso alle proprietà di allineamento e spaziatura di Flexbox anche sull’asse verticale.

.menu-mobile {
  display: flex;
  flex-direction: column; /* Crea una lista verticale */
}

3. Le versioni “Reverse” (Invertite)

A volte hai bisogno di invertire l’ordine visivo degli elementi senza toccare l’HTML. Ad esempio, su mobile vuoi mostrare prima l’immagine e poi il testo, ma su desktop vuoi il testo a sinistra e l’immagine a destra.

`row-reverse`

Gli elementi vengono disposti in riga, ma da destra verso sinistra. Il primo elemento HTML sarà l’ultimo a destra.

.navigazione-araba {
  display: flex;
  flex-direction: row-reverse;
}

`column-reverse`

Gli elementi si impilano verticalmente, ma dal basso verso l’alto. Il primo elemento HTML si troverà in fondo alla colonna. È molto utile, ad esempio, per le interfacce di chat, dove l’ultimo messaggio appare in basso e spinge i vecchi verso l’alto.

Il concetto di Main Axis e Cross Axis

La cosa importante da memorizzare è che l’orientamento cambia il significato degli assi.

Main Axis (Asse Principale): È la direzione definita da flex-direction. Se usi row è l’orizzontale; se usi column è il verticale.
Cross Axis (Asse Trasversale): È sempre l’asse perpendicolare all’Asse Principale.

Nelle prossime due lezioni vedremo due proprietà, justify-content e align-items. Entrambe muovono gli oggetti, ma justify-content lavora sempre sul Main Axis, mentre align-items sul Cross Axis. Se cambi la direzione da row a column, queste due proprietà si scambieranno i compiti!

Esercizi

Base · facile

Trasforma un menu da orizzontale a verticale cambiando una sola proprietà. Qual è?

Soluzione

.menu { display: flex; flex-direction: column; }

column impila gli item dall’alto verso il basso; l’asse principale diventa verticale.

Intermedio · medio

Crea un’interfaccia chat in cui l’ultimo messaggio sta in basso usando column-reverse, e un blocco hero che su mobile mostra prima l’immagine. Per ciascun caso indica dove si trova ora il primo elemento dell’HTML.

Sfida · difficile

Spiega come flex-direction ridefinisce Main Axis e Cross Axis, e prevedi cosa fa justify-content: center quando passi da row a column. Costruisci un esempio in cui lo stesso valore di justify-content centra prima in orizzontale e poi in verticale, e descrivi il rischio di accessibilità delle varianti reverse.

1. row (Riga - Il default)

2. column (Colonna)