Guida CSS interattiva: Justify Content

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

justify-content distribuisce gli elementi lungo l'asse principale, la direzione in cui scorrono (orizzontale con flex-direction: row). align-items li posiziona lungo l'asse trasversale (verticale per una riga). In una colonna i due si scambiano: justify-content diventa verticale.

Q: Qual è la differenza tra space-between, space-around e space-evenly?

space-between non mette spazio prima del primo elemento né dopo l'ultimo e divide il resto tra gli elementi. space-around dà a ogni elemento lo stesso spazio su entrambi i lati, quindi ai bordi arriva mezzo spazio. space-evenly rende uguali tutti gli spazi, bordi compresi.

Q: Cosa fa align-self?

align-self sovrascrive l'align-items del contenitore per un solo elemento. Per esempio align-self: flex-end su un figlio sposta solo quel figlio alla fine dell'asse trasversale, mentre gli altri restano dove li ha messi align-items.

Q: Esiste justify-self in flexbox?

No. Flexbox ignora justify-self, perché l'asse principale è condiviso da tutti gli elementi. Per spingere un elemento lungo l'asse principale, usa un margine auto, come margin-inline-start: auto. justify-self funziona in grid.

justify-content e align-items in una frase ciascuno

In un contenitore flex, justify-content distribuisce gli elementi lungo l'asse principale (lungo la riga) e align-items li allinea sull'asse trasversale (in alto e in basso nella riga). Entrambe vanno sul contenitore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

Il riquadro è centrato in entrambe le direzioni: stessa distanza dal bordo iniziale e da quello finale, e dall'alto e dal basso. Togli height: 140px e align-items: center non ha più niente da fare, perché il contenitore si restringe all'altezza dell'elemento.

Tutti i valori di justify-content, misurati

Ogni riga qui sotto contiene gli stessi tre elementi con un justify-content diverso. I numeri nell'etichetta sopra ogni riga sono gli spazi lasciati dal browser: prima del primo elemento, tra gli elementi e dopo l'ultimo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

Il contenitore è di 420px e gli elementi occupano 180px, quindi ci sono 240px di spazio libero. Dove va a finire:

Valore	Lo spazio libero va	Spazi nella demo
`flex-start` (e `start`)	tutto dopo gli elementi	0 / 0 / 0 / 240
`center`	metà prima, metà dopo	120 / 0 / 0 / 120
`flex-end` (e `end`)	tutto prima degli elementi	240 / 0 / 0 / 0
`space-between`	solo tra gli elementi	0 / 120 / 120 / 0
`space-around`	uguale su entrambi i lati di ogni elemento, quindi i bordi ne ricevono metà	40 / 80 / 80 / 40
`space-evenly`	tutti gli spazi uguali, bordi compresi	60 / 60 / 60 / 60

flex-start segue la direzione flex e start segue la direzione di scrittura. Differiscono solo con row-reverse o column-reverse, dove flex-start sta all'estremità invertita.

Tutti i valori di align-items

align-items agisce trasversalmente alla riga. Gli elementi qui sotto hanno altezze diverse, così puoi vedere cosa fa ogni valore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

Valore	Cosa succede sull'asse trasversale
`stretch` (il predefinito)	Gli elementi senza un'altezza impostata crescono fino a riempire il contenitore
`flex-start` (e `start`)	Gli elementi stanno in alto, con la loro altezza
`center`	Gli elementi sono centrati, con la loro altezza
`flex-end` (e `end`)	Gli elementi stanno in basso
`baseline`	Gli elementi si spostano in modo che le prime righe di testo condividano la stessa linea di base

Nel riquadro baseline le tre etichette "Ag" stanno sulla stessa linea anche se la prima è più grande e la seconda ha del padding sopra. È il valore giusto per una riga che mescola un titolo grande con testo piccolo, o un'etichetta con un input.

Clicca per allineare

Fai clic su una cella qualsiasi della griglia 3 per 3. Il riquadro si sposta lì, e sotto viene stampato il CSS che lo mette in quella posizione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

Le righe del selettore cambiano align-items e le colonne cambiano justify-content. La cella centrale è il classico "centrare un div".

In una colonna i due si scambiano

justify-content segue sempre l'asse principale. Con flex-direction: column l'asse principale è verticale, quindi justify-content sposta gli elementi in alto e in basso e align-items li sposta in orizzontale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

Se li confondi, scambia le due proprietà invece di riscrivere il layout.

align-self e margini auto: un solo elemento

align-self su un elemento sovrascrive align-items per quell'elemento. In flexbox non esiste justify-self; per spostare un elemento lungo l'asse principale, dagli un margine auto, che prende tutto lo spazio libero da quel lato:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

L'elemento verde scende da solo in basso, e quello ambra viene spinto all'estremità opposta della riga mentre gli altri restano all'inizio.

Quando ci sono più linee: align-content

align-items allinea gli elementi dentro la loro linea. Quando un contenitore va a capo su più linee, align-content distribuisce le linee stesse e accetta gli stessi valori di justify-content. Non fa niente in un contenitore nowrap, la cui unica linea riempie sempre l'altezza del contenitore. La pagina su flex-wrap lo mostra.

Errori comuni

Confondere gli assi. justify-content è la direzione del flusso, align-items è quella trasversale. In una colonna, il centraggio verticale è justify-content: center.
Niente spazio libero. Un elemento con flex: 1 prende tutto lo spazio, quindi justify-content non ha niente da distribuire. Lo stesso succede quando il contenitore è inline-flex e largo esattamente quanto i suoi elementi.
Nessuna altezza per align-items. Un contenitore alto quanto il suo contenuto non lascia niente da allineare. Imposta un height o un min-height.
Cercare justify-self in flexbox. Lì viene ignorato. Usa margin-inline-start: auto (o margin-left: auto) sull'elemento.
align-items: stretch che non allunga. Un elemento con un suo height lo mantiene. Togli l'altezza (usa min-height se serve un minimo).
Mettere le proprietà sugli elementi. Entrambe vanno sul contenitore flex. Solo align-self va su un elemento.

Domande frequenti

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

justify-content distribuisce gli elementi lungo l'asse principale, la direzione in cui scorrono (orizzontale con flex-direction: row). align-items li posiziona lungo l'asse trasversale (verticale per una riga). In una colonna i due si scambiano: justify-content diventa verticale.

Qual è la differenza tra space-between, space-around e space-evenly?

space-between non mette spazio prima del primo elemento né dopo l'ultimo e divide il resto tra gli elementi. space-around dà a ogni elemento lo stesso spazio su entrambi i lati, quindi ai bordi arriva mezzo spazio. space-evenly rende uguali tutti gli spazi, bordi compresi.

Perché justify-content non funziona?

Di solito non c'è spazio libero da distribuire: un elemento ha flex-grow o flex: 1, oppure il contenitore è largo solo quanto i suoi elementi (per esempio con display: inline-flex o un contenitore flottante). Controlla anche che display: flex sia sul genitore, non sugli elementi.

Perché align-items center non centra verticalmente?

Probabilmente il contenitore è alto esattamente quanto il suo contenuto, quindi non c'è niente in cui centrare. Dai al contenitore flex un'altezza o un min-height, e gli elementi si sposteranno al centro.

Cosa fa align-self?

align-self sovrascrive l'align-items del contenitore per un solo elemento. Per esempio align-self: flex-end su un figlio sposta solo quel figlio alla fine dell'asse trasversale, mentre gli altri restano dove li ha messi align-items.

Esiste justify-self in flexbox?

No. Flexbox ignora justify-self, perché l'asse principale è condiviso da tutti gli elementi. Per spingere un elemento lungo l'asse principale, usa un margine auto, come margin-inline-start: auto. justify-self funziona in grid.

Concetti correlati