Proprietà CSS align-items

La proprietà CSS align-items imposta l'allineamento predefinito per gli elementi flex (e gli elementi grid) lungo l'asse trasversale del loro contenitore. È la controparte sull'asse trasversale di justify-content, che allinea gli elementi lungo l'asse principale.

Questa pagina spiega cos'è l'asse trasversale, illustra ogni valore con un esempio eseguibile e mostra come align-items si relaziona a align-self e align-content.

Capire l'asse trasversale

In un contenitore flex, l'asse principale è la direzione in cui scorrono gli elementi, impostata da flex-direction. L'asse trasversale è perpendicolare ad esso:

flex-direction: row (il valore predefinito) → l'asse principale è orizzontale, quindi l'asse trasversale è verticale, e align-items controlla l'allineamento verticale.
flex-direction: column → l'asse principale è verticale, quindi l'asse trasversale è orizzontale, e align-items controlla l'allineamento orizzontale.

Poiché l'asse dipende da flex-direction, vengono usati nomi come flex-start e flex-end al posto di top/bottom — significano sempre "inizio dell'asse trasversale" e "fine dell'asse trasversale" indipendentemente dalla direzione.

Nota: align-items si applica solo ai contenitori flex e grid — non ha effetto su un elemento con il valore predefinito display: block. Imposta prima display: flex (o display: grid) sul genitore.

Quando usarlo

Il caso d'uso classico è il centraggio verticale: display: flex; align-items: center centra i figli verticalmente senza margini o posizionamento assoluto. Combinalo con justify-content: center per centrare un elemento su entrambi gli assi — il classico problema "centrare un div" risolto in due righe.

align-items vs. align-self vs. align-content

align-items viene impostato sul contenitore e controlla l'allineamento sull'asse trasversale predefinito di tutti gli elementi.
align-self viene impostato su un singolo elemento per sovrascrivere l'align-items del contenitore solo per quell'elemento.
align-content allinea le righe come gruppo quando il contenitore flex ha più righe (flex-wrap: wrap). Con una singola riga non ha effetto — è in quel caso che si usa align-items.

Questa proprietà è una delle proprietà CSS3.

La proprietà align-items accetta i seguenti valori:

stretch
flex-start
center
flex-end
baseline

Valore iniziale	stretch
Si applica a	Contenitori flex e grid.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.alignItems = "center";

Sintassi

align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

Esempi

stretch (predefinito)

Con stretch, gli elementi si espandono per riempire l'intera dimensione dell'asse trasversale del contenitore (qui, l'altezza completa), a condizione che non abbiano un'altezza fissa propria.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: stretch;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

center

Gli elementi sono posizionati al centro dell'asse trasversale (centrati verticalmente in questo caso).

Esempio della proprietà CSS align-items con il valore center

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: center;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

flex-start

Gli elementi sono posizionati all'inizio dell'asse trasversale (in cima, con il valore predefinito flex-direction: row).

Esempio della proprietà CSS align-items con il valore flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-start;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

flex-end

Gli elementi sono posizionati alla fine dell'asse trasversale (in fondo, con il valore predefinito flex-direction: row).

Esempio della proprietà CSS align-items con il valore flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-end;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

baseline

Gli elementi sono allineati in modo che le loro linee di base del testo coincidano. Questo è utile quando gli elementi contengono testo di dimensioni del carattere diverse e si desidera che le lettere siano su una linea comune.

Esempio della proprietà CSS align-items con il valore baseline

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: baseline;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: baseline; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Provalo
stretch	Fa espandere gli elementi per riempire il contenitore. Questo è il valore predefinito per questa proprietà.	Provalo »
center	Gli elementi sono posizionati al centro del contenitore.	Provalo »
flex-start	Gli elementi sono posizionati all'inizio del contenitore.	Provalo »
flex-end	Gli elementi sono posizionati alla fine del contenitore.	Provalo »
baseline	Gli elementi sono posizionati sulla linea di base del contenitore.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dal suo elemento genitore.

Errori comuni

stretch non ha effetto se gli elementi hanno una dimensione fissa sull'asse trasversale. Se un elemento ha già un height (in un contenitore row), stretch non può espanderlo. Rimuovi la dimensione fissa per permettere l'espansione.
Non succede nulla senza un contenitore flex/grid. align-items viene ignorato se il genitore non ha display: flex o display: grid.
L'asse si inverte con flex-direction: column. In quel caso align-items controlla l'allineamento orizzontale, non verticale.
Per allineare un singolo elemento, usa align-self su quell'elemento invece di modificare l'intero contenitore.

Proprietà correlate

justify-content — allineamento lungo l'asse principale.
align-self — sovrascrive align-items per un singolo elemento.
align-content — allinea le righe avvolte come gruppo.
flex-direction — sceglie quale asse è quello principale.

Esercitati

Pratica

Quali sono i possibili valori per la proprietà 'align-items' in CSS?