Proprietà CSS align-items

La proprietà CSS align-items specifica l'allineamento predefinito degli elementi flex. È simile alla proprietà justify-content, ma allinea gli elementi lungo l'asse trasversale (di solito verticale, a seconda di flex-direction).

Nota: questa proprietà si applica solo ai contenitori flex e grid.

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.
Ereditata	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.alignItems = "center";

Sintassi

Sintassi della proprietà CSS align-items

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

Esempio della proprietà align-items:

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

<!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 »

Risultato

Nell'esempio seguente, gli elementi sono posizionati al centro del contenitore.

Esempio della proprietà align-items con il valore "center":

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 »

Nell'esempio successivo, gli elementi sono posizionati all'inizio.

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

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 »

Qui applichiamo il valore "flex-end", che posiziona gli elementi alla fine del contenitore.

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

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 »

Vediamo il nostro ultimo esempio con il valore "baseline", che posiziona gli elementi sulla linea di base del contenitore.

Esempio della proprietà align-items con il valore "baseline":

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 »

Risultato

Valori

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

Pratica

What are the possible values for the 'align-items' property in CSS?