01Lezione

CSS Flexbox

Il modello di layout monodimensionale per distribuire e allineare elementi lungo un asse. Fondamentale per navbar, card, centraggi e qualsiasi layout a riga o colonna.

Introduzione

CSS Flexible Box Layout, o Flexbox, è un metodo di layout monodimensionale: permette di disporre gli elementi lungo un unico asse — orizzontale o verticale.

Gli elementi possono espandersi (flex) per riempire lo spazio disponibile, oppure contrarsi per adattarsi a spazi più piccoli. È lo strumento ideale per navbar, gruppi di pulsanti, card allineate e centraggi.

Flexbox vs Grid

Usa Flexbox per layout monodimensionali (una riga o una colonna alla volta). Usa CSS Grid per layout bidimensionali (righee colonne allo stesso tempo). Spesso si usano insieme.

Terminologia

Prima di scrivere codice è importante conoscere i quattro concetti chiave:

  • Flex container — l'elemento su cui si imposta display: flex. Gestisce la distribuzione dei figli.
  • Flex items — i figli diretti del flex container. Solo i figli diretti diventano flex items.
  • Main axis — l'asse principale su cui gli elementi vengono disposti. Determinato da flex-direction.
  • Cross axis — l'asse perpendicolare al main axis.
flex container123flex itemmain startmain endmain axiscross startcross endcross axis
Terminologia fondamentale di Flexbox
css
/* Il flex container attiva il contesto flex */
.container {
  display: flex; /* o inline-flex */
}

/* I figli diretti diventano automaticamente flex items */
/* I discendenti più profondi NON sono flex items */

Il Flex Container

Basta aggiungere display: flex a un elemento per trasformarlo in flex container. I suoi figli diretti si dispongono automaticamente in riga, invece di impillarsi come i normali elementi block.

flex-direction

La proprietà flex-direction definisce l'asse principale e la direzione in cui gli elementi vengono disposti.

css
/* Quattro valori possibili */
.container {
  flex-direction: row;            /* → da sinistra a destra (default) */
  flex-direction: row-reverse;    /* ← da destra a sinistra */
  flex-direction: column;         /* ↓ dall'alto in basso */
  flex-direction: column-reverse; /* ↑ dal basso in alto */
}
L'asse cambia con la direzione

Con flex-direction: row, il main axis è orizzontale e il cross axis è verticale. Con column è il contrario. Questo influenza il comportamento di justify-content e align-items.

flex-wrap

Di default, tutti i flex items cercano di stare su una sola riga, comprimendosi se necessario. Con flex-wrap: wrap possono andare a capo su più righe.

css
/* Tre valori possibili */
.container {
  flex-wrap: nowrap;       /* tutto su una riga (default) */
  flex-wrap: wrap;         /* va a capo su più righe */
  flex-wrap: wrap-reverse; /* va a capo in senso inverso */
}

flex-flow

flex-flow è la forma abbreviata (shorthand) per scrivereflex-direction e flex-wrap in una sola riga. Il valore predefinito è row nowrap.

css
/* Forma estesa */
.container {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Forma abbreviata equivalente */
.container {
  flex-flow: row wrap;
}

Dimensioni con flex

La proprietà flex controlla quanto spazio un item occupa lungo il main axis. È uno shorthand per tre proprietà:

  • flex-grow — quanto l'item cresce rispetto agli altri
  • flex-shrink — quanto si riduce se lo spazio è insufficiente
  • flex-basis — la dimensione iniziale prima della distribuzione
css
/* Forma abbreviata — raccomandata */
.item { flex: 1; }        /* tutti uguali */
.item { flex: 2; }        /* doppio dello spazio */
.item { flex: 1 100px; }  /* almeno 100px, poi distribuisce */

/* Forma estesa equivalente */
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
Usa sempre la forma abbreviata

Si consiglia di usare sempre flex invece delle singole proprietà: la shorthand imposta automaticamente i valori di default in modo corretto (es. flex: 1 equivale a flex: 1 1 0, non a flex-grow: 1 da solo).

justify-content

justify-content distribuisce gli elementi lungo il main axis. Se flex-direction è row, agisce in orizzontale; se è column, agisce in verticale.

css
/* Valori principali */
.container {
  justify-content: flex-start;    /* → inizio (default) */
  justify-content: flex-end;      /* → fine */
  justify-content: center;        /* → centro */
  justify-content: space-between; /* primo all'inizio, ultimo alla fine */
  justify-content: space-around;  /* spazio uguale attorno a ogni item */
  justify-content: space-evenly;  /* spazio identico tra tutti */
}

align-items

align-items allinea gli elementi lungo il cross axis(l'asse perpendicolare). Con flex-direction: row, agisce in verticale.

css
/* Valori principali */
.container {
  align-items: stretch;     /* si allungano per riempire il container (default) */
  align-items: flex-start;  /* allineati in alto */
  align-items: flex-end;    /* allineati in basso */
  align-items: center;      /* centrati verticalmente */
  align-items: baseline;    /* allineati alla linea di base del testo */
}

Ordinare con order

La proprietà order permette di cambiare l'ordine visivo degli elementi senza toccare l'HTML. Il valore predefinito è 0; valori più alti appaiono dopo, valori negativi appaiono prima.

css
/* Regole di order */
.item { order: 0; }   /* posizione normale (default) */
.item { order: 1; }   /* appare dopo quelli con order: 0 */
.item { order: -1; }  /* appare prima di quelli con order: 0 */

/* Esempio pratico: spostare un elemento in cima */
.featured {
  order: -1;
}
Order e accessibilità

order cambia solo l'ordine visivo. Gli screen reader e la navigazione da tastiera seguono ancora l'ordine del DOM. Per cambiare l'ordine logico modifica direttamente l'HTML.

Esercizi

✏️Metti in pratica

Esercizio A — Base

Navbar orizzontale

Crea una navbar con Flexbox che abbia:

  • Logo a sinistra
  • Voci di menu al centro
  • Pulsante login a destra
  • Altezza fissa 56px con elementi centrati verticalmente
Risultato atteso

Esercizio B — Intermedio

Card con layout interno

Crea una serie di card con Flexbox:

  • Le card si dispongono in riga e vanno a capo se non c'è spazio
  • Ogni card ha una larghezza minima di 280px e cresce per riempire lo spazio
  • Il contenuto di ogni card è disposto in colonna
  • Il bottone è sempre in fondo alla card, indipendentemente dall'altezza del testo
Risultato atteso

Esercizio C — Avanzato

Layout a due colonne

Realizza un layout pagina con sidebar e contenuto principale:

  • Sidebar con larghezza fissa di 240px, non si restringe né si allarga
  • Il contenuto principale occupa tutto lo spazio rimanente
  • I due blocchi si allineano in cima, non si allungano per riempire l'altezza
Risultato atteso

📚 Risorse