Propriedade CSS align-items

A propriedade CSS align-items especifica o alinhamento predefinido dos itens flex. É semelhante à propriedade justify-content, mas alinha os itens ao longo do eixo transversal (normalmente vertical, dependendo de flex-direction).

Nota: esta propriedade aplica-se apenas a contentores flex e grid.

Esta propriedade é uma das propriedades CSS3.

A propriedade align-items aceita os seguintes valores:

stretch
flex-start
center
flex-end
baseline

Valor inicial	stretch
Aplica-se a	Contentores flex e grid.
Herdada	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.alignItems = "center";

Sintaxe

Sintaxe da propriedade CSS align-items

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

Exemplo da propriedade align-items:

Exemplo da propriedade CSS align-items com o valor 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>

Experimente Você Mesmo »

Resultado

No exemplo seguinte, os itens são posicionados no centro do contentor.

Exemplo da propriedade align-items com o valor "center":

Exemplo da propriedade CSS align-items com o valor 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>

Experimente Você Mesmo »

No exemplo seguinte, os itens são colocados no início.

Exemplo da propriedade align-items com o valor "flex-start":

Exemplo da propriedade CSS align-items com o valor 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>

Experimente Você Mesmo »

Aqui, aplicamos o valor "flex-end", que coloca os itens no fim do contentor.

Exemplo da propriedade align-items com o valor "flex-end":

Exemplo da propriedade CSS align-items com o valor 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>

Experimente Você Mesmo »

Vejamos o nosso último exemplo com o valor "baseline", que coloca os itens na linha de base do contentor.

Exemplo da propriedade align-items com o valor "baseline":

Exemplo da propriedade CSS align-items com o valor 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>

Experimente Você Mesmo »

Resultado

Valores

Valor	Descrição	Experimente
stretch	Faz com que os itens se estiquem para preencher o contentor. Este é o valor predefinido desta propriedade.	Experimente »
center	Os itens são colocados no centro do contentor.	Experimente »
flex-start	Os itens são colocados no início do contentor.	Experimente »
flex-end	Os itens são colocados no fim do contentor.	Experimente »
baseline	Os itens são posicionados na linha de base do contentor.	Experimente »
initial	Faz com que a propriedade utilize o seu valor predefinido.	Experimente »
inherit	Herda a propriedade do seu elemento pai.

Prática

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