Guida CSS interattiva: Flexbox

Q: Cosa significa flex: 1?

flex: 1 è la forma breve di flex: 1 1 0%: l'elemento può crescere (flex-grow: 1), può restringersi (flex-shrink: 1) e parte da una dimensione zero (flex-basis: 0%). Gli elementi che hanno tutti flex: 1 si dividono lo spazio libero in parti uguali, quindi finiscono per avere la stessa larghezza, a meno che il loro contenuto non ci stia.

Q: Che differenza c'è tra justify-content e align-items?

justify-content posiziona gli elementi lungo l'asse principale (in orizzontale in una riga), e align-items lungo l'asse trasversale (in verticale in una riga). Con flex-direction: column i due assi si scambiano, quindi justify-content diventa verticale.

Q: Perché il mio elemento flex esce dal contenitore?

Un elemento flex ha min-width: auto per impostazione predefinita, quindi si rifiuta di restringersi sotto la larghezza della sua parola più lunga o del suo figlio più largo. Imposta min-width: 0 (o overflow: hidden) sull'elemento per permettergli di restringersi, per esempio per far funzionare text-overflow: ellipsis.

Q: Flexbox funziona su elementi inline come span?

Sì. Qualsiasi elemento con display: flex è un contenitore flex, e i suoi figli diventano elementi flex qualunque sia il loro display, quindi i figli smettono di essere inline e accettano larghezza, altezza e margin come i blocchi.

Cosa fa display: flex

Metti display: flex su un genitore e i suoi figli diretti si allineano in una riga, uno accanto all'altro, e si allungano alla stessa altezza. Quella sola dichiarazione sostituisce float, inline-block e la maggior parte dei trucchi di posizionamento per disporre una fila di cose.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Nel primo box ogni div occupa una riga intera. Nel secondo i tre elementi stanno in una riga, ognuno largo solo quanto il suo contenuto, e One e Three si allungano fino all'altezza di Two. È cambiato solo il genitore: display: flex va sul contenitore, mai sugli elementi.

Playground flexbox

Scegli dei valori e guarda gli elementi muoversi. La riga di codice sotto il box è il CSS di ciò che vedi, e l'elenco sotto è dove il browser ha effettivamente collocato ogni elemento, misurato con getBoundingClientRect().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

Cose da provare:

justify-content: space-between: l'elemento 1 finisce a x 0 e l'elemento 3 tocca il bordo opposto.
align-items: center: i tre elementi mantengono la propria altezza e i loro centri si allineano. Con il valore predefinito stretch, l'elemento 1 non ha un'altezza propria e riempie tutti i 170px del contenitore.
flex-direction: column: ora justify-content sposta gli elementi in verticale e align-items in orizzontale. Le due proprietà seguono gli assi, non lo schermo.

Asse principale e asse trasversale

Ogni contenitore flex ha due assi. L'asse principale è la direzione in cui scorrono gli elementi, impostata da flex-direction. L'asse trasversale lo attraversa.

`flex-direction`	Asse principale	Asse trasversale	`justify-content` sposta gli elementi	`align-items` sposta gli elementi
`row` (predefinito)	orizzontale, nell'ordine di lettura	verticale	in orizzontale	in verticale
`row-reverse`	orizzontale, al contrario	verticale	in orizzontale	in verticale
`column`	verticale, dall'alto in basso	orizzontale	in verticale	in orizzontale
`column-reverse`	verticale, dal basso in alto	orizzontale	in verticale	in orizzontale

In una pagina da destra a sinistra (dir="rtl"), row parte dal bordo destro, perché l'asse principale segue la direzione di scrittura.

Proprietà del contenitore

Queste vanno sull'elemento con display: flex:

Proprietà	Cosa fa	Predefinito
`flex-direction`	Riga o colonna, e in che verso	`row`
`flex-wrap`	Se gli elementi passano a una nuova riga quando finisce lo spazio	`nowrap`
`flex-flow`	Forma abbreviata per `flex-direction` e `flex-wrap`	`row nowrap`
`justify-content`	Posizione e spaziatura lungo l'asse principale	`normal` (si comporta come `flex-start`)
`align-items`	Posizione degli elementi lungo l'asse trasversale	`normal` (si comporta come `stretch`)
`align-content`	Spaziatura tra le righe quando gli elementi vanno a capo	`normal`
`gap`	Spazio tra gli elementi (`row-gap`, `column-gap`)	`0`

justify-content e align-items hanno ciascuna una pagina con tutti i valori: justify-content e align-items. L'andata a capo e la direzione sono nella pagina su flex-wrap.

Proprietà degli elementi: flex-grow, flex-shrink, flex-basis

Queste vanno sui figli e decidono come si dividono la larghezza del contenitore:

flex-basis: la dimensione da cui parte un elemento prima che lo spazio libero venga distribuito (auto significa "usa la mia larghezza o il mio contenuto").
flex-grow: quante quote dello spazio avanzato prende l'elemento. 0 significa che non cresce mai.
flex-shrink: quanto cede l'elemento quando lo spazio non basta. 0 significa che non si restringe mai.

La forma abbreviata flex le imposta tutte e tre:

Scrivi	Che significa	Comportamento
`flex: initial` (predefinito)	`0 1 auto`	Dimensione del contenuto, può restringersi, non cresce mai
`flex: 1`	`1 1 0%`	Parte da zero e prende una quota uguale dello spazio
`flex: auto`	`1 1 auto`	Dimensione del contenuto più una quota dello spazio avanzato
`flex: none`	`0 0 auto`	Esattamente il suo contenuto o la sua larghezza, non cresce né si restringe mai
`flex: 2`	`2 1 0%`	Il doppio della quota di un elemento con `flex: 1`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

Ogni riga è larga 480px dentro il suo padding, e i due spazi da 8px lasciano 464px per gli elementi. Le larghezze stampate mostrano come è stato diviso: circa 155px ciascuno nella prima riga, 116 + 232 + 116 nella seconda (l'elemento con flex: 2 riceve il doppio della quota di ciascun vicino), e 100 + 372 nella terza, dove l'elemento con flex: none mantiene la sua larghezza e l'altro prende tutto il resto.

Layout reali con flexbox

Un header con un logo all'inizio e i link alla fine è il layout flex più comune. margin-inline-start: auto su un elemento si mangia tutto lo spazio libero prima di sé e spinge alla fine sia l'elemento sia tutto ciò che lo segue:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

align-items: center allinea il testo più grande del logo con i link, e gap spazia i link senza margini da annullare sull'ultimo.

Un secondo schema quotidiano è la riga media: un'icona a dimensione fissa e un testo che prende il resto e va a capo nella sua colonna.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

flex: none è la garanzia. Gli elementi flex si restringono per impostazione predefinita, quindi se lo togli dal cerchio e togli anche flex: 1 dal testo, il paragrafo schiaccia il cerchio fino a circa 23px di larghezza: un ovale. Per centrare una cosa in un box, con flexbox bastano due righe (justify-content: center; align-items: center); la pagina su come centrare un div lo confronta con gli altri metodi.

order e accessibilità

La proprietà order e le direzioni -reverse cambiano dove gli elementi appaiono, non dove si trovano nell'HTML. Gli screen reader e il tasto Tab seguono comunque l'ordine dell'HTML, quindi chi usa la tastiera può saltare dal primo link sullo schermo all'ultimo. Usali solo per decorazione; quando l'ordine ha un significato, cambia l'HTML.

Flexbox o grid

Flexbox lavora in una direzione alla volta: gli elementi in una riga si dimensionano in base al contenuto, e una seconda riga (con l'andata a capo) non si allinea con la prima. Grid lavora in due: definisci colonne e righe e gli elementi ci si incastrano. Una barra di navigazione, una toolbar o una riga di un modulo sono flexbox; una galleria o una pagina con barra laterale sono grid.

Errori comuni

display: flex sull'elemento invece che sul genitore. Il contenitore riceve display: flex; i suoi figli sono gli elementi.
Aspettarsi che align-items sposti gli elementi in verticale senza altezza. Se il contenitore è alto solo quanto il suo elemento più alto, non c'è spazio per spostarli. Dai un'altezza al contenitore, oppure sta funzionando e semplicemente non ha nulla da fare.
Testo che esce invece di restringersi. Gli elementi flex hanno min-width: auto. Aggiungi min-width: 0 all'elemento che deve restringersi.
Usare flex: 1 e chiedersi perché le larghezze sono diverse. Gli elementi con flex: 1 si dividono lo spazio in parti uguali, ma un elemento il cui contenuto non ci sta (un URL lungo, un'immagine) non si restringe al di sotto. Anche qui la soluzione è min-width: 0.
Margini tra gli elementi. Usa gap sul contenitore; va solo tra gli elementi.
Annidare flex senza motivo. Solo i figli diretti sono elementi flex. I nipoti seguono il layout normale, a meno che anche il loro genitore non abbia display: flex.

Domande frequenti

Cosa fa display: flex?

Trasforma un elemento in un contenitore flex. I suoi figli diretti diventano elementi flex e per impostazione predefinita vengono messi in riga, uno accanto all'altro, allungati alla stessa altezza, con proprietà come justify-content, align-items e gap che controllano come si dividono lo spazio.

Cosa significa flex: 1?

flex: 1 è la forma breve di flex: 1 1 0%: l'elemento può crescere (flex-grow: 1), può restringersi (flex-shrink: 1) e parte da una dimensione zero (flex-basis: 0%). Gli elementi che hanno tutti flex: 1 si dividono lo spazio libero in parti uguali, quindi finiscono per avere la stessa larghezza, a meno che il loro contenuto non ci stia.

Che differenza c'è tra justify-content e align-items?

justify-content posiziona gli elementi lungo l'asse principale (in orizzontale in una riga), e align-items lungo l'asse trasversale (in verticale in una riga). Con flex-direction: column i due assi si scambiano, quindi justify-content diventa verticale.

Meglio flexbox o grid?

Usa flexbox per una sola riga o colonna i cui elementi si dimensionano in base al contenuto: barre di navigazione, gruppi di pulsanti, un'etichetta accanto a un input. Usa grid quando vuoi righe e colonne allineate tra loro, come una griglia di schede o il layout di una pagina.

Perché il mio elemento flex esce dal contenitore?

Un elemento flex ha min-width: auto per impostazione predefinita, quindi si rifiuta di restringersi sotto la larghezza della sua parola più lunga o del suo figlio più largo. Imposta min-width: 0 (o overflow: hidden) sull'elemento per permettergli di restringersi, per esempio per far funzionare text-overflow: ellipsis.

Flexbox funziona su elementi inline come span?

Sì. Qualsiasi elemento con display: flex è un contenitore flex, e i suoi figli diventano elementi flex qualunque sia il loro display, quindi i figli <span> smettono di essere inline e accettano larghezza, altezza e margin come i blocchi.

Concetti correlati