Flexbox Tutorial CSS: Guida Completa ai Layout Moderni

Aggiornato: Febbraio 2026

Se hai mai lottato con i float o hai cercato disperatamente di centrare un div verticalmente usando margini percentuali, ho una buona notizia per te: quei giorni sono finiti.

Flexbox (o Flexible Box Layout) è il modulo CSS che ha rivoluzionato il modo in cui costruiamo layout. Prima del suo arrivo, allineare elementi significava hackerare float, display: table o position: absolute — tecniche fragili che si rompevano al primo resize. Con Flexbox, allineamento, distribuzione dello spazio e ordine degli elementi diventano dichiarativi e prevedibili.

In questo flexbox tutorial imparerai a dominare lo spazio, l’allineamento e l’ordine degli elementi sulla tua pagina web, dalle basi fino ai pattern avanzati di layout responsive.

---

L’Architettura di Flexbox: Flex Container e Flex Items

Prima di scrivere codice, è fondamentale capire la relazione genitore-figlio. Flexbox non lavora sul singolo elemento isolato, ma sulla relazione tra il contenitore e i suoi figli diretti.

• Flex Container (Genitore): L’elemento su cui attivi Flexbox con display: flex.
• Flex Items (Figli): Gli elementi diretti all’interno del contenitore, che diventano automaticamente flessibili.

Attivare Flexbox

Immaginiamo di avere un contenitore con tre box al suo interno.

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Per attivare Flexbox, basta una singola regola CSS sul genitore:

.container {
  display: flex;
}

Appena scrivi questo, i box si dispongono automaticamente in una riga orizzontale, uno accanto all’altro. Hai appena creato un contesto Flex.

Comprendere il sistema degli assi

Flexbox si basa su due assi: l’Asse Principale (Main Axis) e l’Asse Trasversale (Cross Axis). Capire questo concetto è il segreto per non confondersi mai durante lo sviluppo.

La proprietà flex-direction decide qual è l’asse principale:

• row (default): asse principale orizzontale, da sinistra a destra.
• column: asse principale verticale, dall’alto in basso.
• row-reverse / column-reverse: invertono direzione e ordine.

.container {
  display: flex;
  flex-direction: row; /* I box sono in riga (default) */
}

Quando cambi flex-direction a column, tutti gli allineamenti si invertono: justify-content lavora verticalmente e align-items orizzontalmente. Questo è il punto dove la maggior parte degli sviluppatori si confonde — ricorda: justify-content agisce sempre sull’asse principale, qualunque esso sia.

---

Allineamento e Distribuzione: Gestire lo Spazio nel Container

Queste sono le proprietà che applichi al contenitore per controllare come i figli si dispongono nello spazio disponibile.

Direzione e flusso: flex-direction e flex-wrap

Di default, Flexbox forza tutti gli elementi su una singola riga, stringendoli fino a farli diventare minuscoli pur di tenerli insieme. Per permettere agli elementi di andare a capo quando lo spazio finisce:

.container {
  display: flex;
  flex-wrap: wrap; /* Gli elementi vanno a capo se non c'è spazio */
}

Puoi combinare direzione e wrap con la shorthand flex-flow:

.container {
  display: flex;
  flex-flow: row wrap; /* Equivale a flex-direction: row + flex-wrap: wrap */
}

Allineamento sull’asse principale: justify-content

Come distribuiamo lo spazio vuoto tra i box? justify-content lavora sempre sull’asse principale.

.container {
  display: flex;
  justify-content: center; /* Centra tutto sull'asse principale */
}

I valori più usati:

• flex-start (default): tutti all’inizio.
• flex-end: tutti alla fine.
• center: tutti al centro.
• space-between: il primo all’inizio, l’ultimo alla fine, spazio uguale in mezzo.
• space-around: spazio uguale intorno a ogni elemento.
• space-evenly: spazio perfettamente uguale ovunque, compresi i bordi.

Allineamento sull’asse trasversale: align-items e align-content

align-items controlla l’allineamento sull’asse trasversale (verticale, se sei in row):

.container {
  display: flex;
  align-items: center; /* Centra verticalmente */
}

• stretch (default): i box si allungano per riempire l’altezza del contenitore.
• flex-start: allineati in alto.
• flex-end: allineati in basso.
• center: centrati verticalmente.
• baseline: allineati alla linea di base del testo.

Quando hai più righe (con flex-wrap: wrap), entra in gioco align-content, che distribuisce lo spazio tra le righe con gli stessi valori di justify-content.

La proprietà moderna: gap

Fino a poco tempo fa, dovevamo usare i margini per separare i box, creando problemi con l’ultimo elemento. Oggi, tutti i browser moderni supportano gap:

.container {
  display: flex;
  gap: 20px; /* 20px tra ogni elemento, sia in riga che in colonna */
}

Puoi anche specificare valori diversi per riga e colonna: gap: 20px 10px (riga colonna). Se vieni da CSS Grid, riconoscerai questa proprietà — funziona allo stesso modo.

---

Controllo dei Singoli Elementi: Proprietà dei Flex Items

Fin qui abbiamo lavorato sul contenitore. Ora passiamo alle proprietà che si applicano ai singoli figli per controllarne il comportamento individuale.

Flessibilità dinamica: flex-grow, flex-shrink e flex-basis

Queste tre proprietà sono il cuore della “flessibilità” di Flexbox. Controllano come ogni elemento cresce, si riduce e definisce la propria dimensione di partenza.

flex-basis — la dimensione iniziale dell’elemento prima che lo spazio venga distribuito:

.box {
  flex-basis: 200px; /* Parte da 200px, poi Flexbox redistribuisce lo spazio */
}

flex-grow — quanto spazio extra un elemento può occupare rispetto agli altri:

/* Il box-principale occupa il doppio dello spazio rispetto agli altri */
.box { flex-grow: 1; }
.box-principale { flex-grow: 2; }

flex-shrink — quanto un elemento si riduce quando lo spazio non basta:

/* Questo elemento non si ridurrà mai sotto il suo flex-basis */
.box-fisso { flex-shrink: 0; }

La shorthand flex combina tutte e tre. La vedrai spessissimo scritta così:

.box {
  flex: 1; /* Equivale a flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

Significa: “Fai crescere questo elemento affinché occupi tutto lo spazio disponibile rimanente.” È probabilmente la dichiarazione Flexbox più usata in assoluto.

Un esempio pratico — layout sidebar + contenuto principale:

/* La sidebar ha una larghezza fissa, il contenuto si espande */
.sidebar {
  flex: 0 0 250px; /* Non cresce, non si riduce, base 250px */
}

.contenuto {
  flex: 1; /* Occupa tutto lo spazio rimanente */
}

Sovrascrivere l’allineamento con align-self

Mentre align-items sul contenitore allinea tutti i figli allo stesso modo, align-self permette a un singolo elemento di comportarsi diversamente:

.container {
  display: flex;
  align-items: flex-start; /* Tutti allineati in alto */
}

.box-speciale {
  align-self: flex-end; /* Solo questo va in basso */
}

Gestire l’ordine visivo con order

Puoi cambiare l’ordine di visualizzazione degli elementi senza modificare l’HTML. Tutti gli elementi partono con order: 0 — valori più bassi vengono prima:

/* Sposta il terzo elemento all'inizio visivo */
.box:nth-child(3) {
  order: -1;
}

Un avviso importante: order cambia solo l’ordine visivo, non quello di lettura per gli screen reader. Usalo con cautela per non creare problemi di accessibilità. Per approfondire le basi dell’accessibilità, leggi la nostra guida all’HTML semantico.

---

Esempi Pratici di Layout Responsive

Mettiamo tutto insieme con pattern che userai ogni giorno.

Centratura assoluta (Il “Sacro Graal” del CSS)

Per centrare perfettamente un elemento sia orizzontalmente che verticalmente, ti bastano 3 righe:

.center-me {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Occupa tutta l'altezza della viewport */
}

Questo pattern è perfetto per landing page, pagine di errore 404, e modali.

Navbar con logo a sinistra e link a destra

<nav class="navbar">
  <div class="logo">MioBrand</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* Logo a sinistra, link a destra */
  align-items: center; /* Centra tutto verticalmente */
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex; /* Anche la lista diventa flex per affiancare i link */
  gap: 20px;
  list-style: none;
}

Il trucco di margin-left: auto funziona altrettanto bene qui: se hai un pulsante che vuoi spingere tutto a destra separato dagli altri link, basta margin-left: auto su quell’elemento.

Card grid flessibile senza media query eccessive

Con flex-wrap e flex-basis puoi creare una griglia di card che si adatta automaticamente allo spazio disponibile:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* Cresce, si riduce, base minima 300px */
  /* Le card si dispongono automaticamente:
     - 3 per riga su schermi grandi
     - 2 per riga su tablet
     - 1 per riga su mobile
     Tutto senza una singola media query */
}

Questo è uno dei pattern più potenti di Flexbox. La regola flex: 1 1 300px dice: “Ogni card parte da 300px, può crescere per riempire lo spazio, e quando non c’è più posto va a capo.” Il risultato è un layout responsive quasi automatico.

Footer a colonne con stack su mobile

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.footer-colonna {
  flex: 1 1 200px; /* Su mobile si impilano, su desktop affiancate */
}

---

Debugging Flexbox: Strumenti e Errori Comuni

Usare i DevTools del browser

Non tirare a indovinare. I browser moderni hanno strumenti dedicati a Flexbox:

Chrome DevTools: Fai clic destro → Ispeziona → nel pannello Elements, cerca il badge flex accanto al tuo contenitore. Cliccandoci sopra attivi l’overlay che mostra assi, allineamento e spazio distribuito. Nel pannello Layout trovi anche le opzioni per evidenziare tutti i container Flex della pagina.

Firefox DevTools: Ancora più potente — il pannello Layout ha una sezione dedicata a Flexbox che ti permette di visualizzare in tempo reale come lo spazio viene distribuito tra gli elementi, con indicatori numerici per flex-grow e flex-shrink.

Errori comuni da evitare

Dimenticare min-width: 0 sugli elementi. Flexbox rispetta il contenuto minimo di un elemento. Se un figlio contiene testo lungo o un’immagine, potrebbe non ridursi come ti aspetti. La soluzione:

/* Il testo lungo esce dal contenitore */
.box-con-testo-lungo {
  min-width: 0; /* Permette all'elemento di ridursi sotto il suo contenuto */
  overflow: hidden;
  text-overflow: ellipsis;
}

Confondere gli assi dopo flex-direction: column. Quando passi a column, justify-content lavora verticalmente e align-items orizzontalmente. Non è un bug — è il comportamento atteso.

Usare height: 100% invece di flex: 1. Dentro un contesto Flex, se vuoi che un elemento riempia lo spazio verticale rimanente, non usare percentuali — usa flex: 1 sul figlio.

Non testare con contenuto reale. Un layout Flexbox che funziona con box vuoti potrebbe rompersi con testo lungo, immagini di dimensioni diverse o contenuto dinamico. Testa sempre con contenuto realistico.

---

Flexbox vs CSS Grid: Quando Usare l’Uno o l’Altro

Questa è una delle domande più frequenti. La risposta breve: non sono in competizione, sono complementari.

Flexbox è ideale per layout monodimensionali — quando lavori su una riga O una colonna alla volta. Navbar, toolbar, card in fila, footer, allineamento di elementi dentro un componente.

CSS Grid è ideale per layout bidimensionali — quando hai bisogno di controllare righe E colonne contemporaneamente. Layout di pagina, dashboard, gallerie fotografiche con posizionamento preciso.

La regola pratica: se il tuo layout si sviluppa in una sola direzione e gli elementi devono adattarsi allo spazio disponibile, usa Flexbox. Se hai bisogno di una griglia con righe e colonne definite, usa CSS Grid.

Nella pratica quotidiana, li usi insieme: Grid per la struttura della pagina (header, sidebar, main, footer) e Flexbox per allineare gli elementi dentro ogni sezione. Non devi scegliere l’uno o l’altro.

/* Grid per il layout di pagina */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

/* Flexbox per allineare gli elementi dentro la navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Per approfondire Grid, leggi la nostra guida Cos’è il CSS Grid e come funziona. Per il layout responsive in generale, trovi tecniche avanzate nella guida su come creare layout responsive.

---

Risorse per Continuare a Imparare

Non c’è modo migliore per imparare Flexbox che visualizzare il codice. Ti consiglio Flexbox Froggy — un tutorial interattivo dove aiuti una ranocchia a raggiungere la sua foglia scrivendo codice CSS reale. È il modo più divertente per consolidare tutto quello che hai imparato.

---

Conclusione

Flexbox è uno strumento indispensabile per lo sviluppo web moderno. Ricorda i concetti fondamentali:

1. Definisci il contenitore con display: flex.
2. Scegli la direzione con flex-direction.
3. Distribuisci lo spazio sull’asse principale con justify-content.
4. Allinea sull’asse trasversale con align-items.
5. Controlla i singoli elementi con flex-grow, flex-shrink, flex-basis e align-self.
6. Usa gap per spaziature pulite senza margini extra.

La prossima volta che devi allineare elementi, centrare un div, o creare un layout che si adatta allo schermo, Flexbox è quasi sempre la risposta giusta. E quando hai bisogno di una griglia bidimensionale, combinalo con CSS Grid per il massimo controllo.

---

🧠 Mettiti alla prova: Quiz Flexbox

1. Quale proprietà definisce l’allineamento lungo l’Asse Principale? → justify-content
2. Se voglio che i miei box vadano a capo quando finisce lo spazio, cosa uso? → flex-wrap: wrap
3. Qual è il codice per centrare perfettamente un elemento? → display: flex + justify-content: center + align-items: center
4. Come faccio a dare una larghezza fissa alla sidebar e lasciare il contenuto flessibile? → flex: 0 0 250px sulla sidebar, flex: 1 sul contenuto
5. Posso usare Flexbox e Grid insieme? → Sì, Grid per la struttura della pagina e Flexbox per l’allineamento dentro i componenti.

---

FAQ su Flexbox

Flexbox è supportato da tutti i browser?

Sì. Dal 2020 il supporto è universale su tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e i browser mobile. Non servono più prefissi vendor.

Come centro un div verticalmente e orizzontalmente?

Con tre righe: display: flex, justify-content: center, align-items: center sul contenitore. Aggiungi min-height: 100vh se vuoi che occupi tutta la viewport.

Qual è la differenza tra justify-content e align-items?

justify-content lavora sull’asse principale (orizzontale di default), align-items sull’asse trasversale (verticale di default). Se cambi flex-direction a column, si invertono.

Posso cambiare l’ordine degli elementi senza toccare l’HTML?

Sì, con la proprietà order. Ma attenzione: cambia solo l’ordine visivo, non quello di lettura per screen reader e navigazione da tastiera.

Flexbox è meglio di CSS Grid?

Non è una questione di “meglio” — sono strumenti diversi. Flexbox per layout monodimensionali (una riga o una colonna), Grid per layout bidimensionali (righe e colonne insieme). Nella pratica si usano insieme.

Cosa fa flex: 1?

È una shorthand per flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Significa: “Fai crescere questo elemento per occupare tutto lo spazio disponibile rimanente.”