Propriedade CSS align-items

A propriedade CSS align-items define o alinhamento padrão dos itens flex (e itens de grid) ao longo do eixo transversal do container. É o equivalente transversal de justify-content, que alinha os itens ao longo do eixo principal.

Esta página explica o que é o eixo transversal, percorre cada valor com um exemplo executável e mostra como align-items se relaciona com align-self e align-content.

Entendendo o eixo transversal

Em um container flex, o eixo principal é a direção em que os itens fluem, definida por flex-direction. O eixo transversal é perpendicular a ele:

flex-direction: row (o padrão) → o eixo principal é horizontal, portanto o eixo transversal é vertical, e align-items controla o alinhamento vertical.
flex-direction: column → o eixo principal é vertical, portanto o eixo transversal é horizontal, e align-items controla o alinhamento horizontal.

Como o eixo depende de flex-direction, nomes como flex-start e flex-end são usados em vez de top/bottom — eles sempre significam "início do eixo transversal" e "fim do eixo transversal", independentemente da direção.

Nota: align-items aplica-se apenas a containers flex e grid — não tem efeito em um elemento com o display: block padrão. Defina display: flex (ou display: grid) no pai primeiro.

Quando usar

O caso de uso clássico é o centralização vertical: display: flex; align-items: center centraliza os filhos verticalmente sem margens ou posicionamento absoluto. Combine com justify-content: center para centralizar um item nos dois eixos — o antigo problema de "centralizar uma div" resolvido em duas linhas.

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

align-items é definido no container e controla o alinhamento padrão no eixo transversal de todos os itens.
align-self é definido em um item individual para substituir o align-items do container apenas para aquele item.
align-content alinha as linhas como um grupo quando o container flex possui múltiplas linhas (flex-wrap: wrap). Com uma única linha não tem efeito — é quando se usa align-items.

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	Containers flex e grid.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.alignItems = "center";

Sintaxe

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

Exemplos

stretch (padrão)

Com stretch, os itens crescem para preencher todo o tamanho do eixo transversal do container (aqui, a altura total), desde que não tenham uma altura fixa definida.

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

center

Os itens são posicionados no centro do eixo transversal (centralizados verticalmente aqui).

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 »

flex-start

Os itens são colocados no início do eixo transversal (no topo, com o padrão flex-direction: row).

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 »

flex-end

Os itens são colocados no fim do eixo transversal (na base, com o padrão flex-direction: row).

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 »

baseline

Os itens são alinhados de modo que suas linhas de base do texto fiquem niveladas. Isso é útil quando os itens contêm texto de diferentes tamanhos de fonte e você deseja que as letras assentem em uma linha comum.

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 »

Valores

Valor	Descrição	Testar
stretch	Faz os itens se expandirem para preencher o container. Este é o valor padrão desta propriedade.	Testar »
center	Os itens são posicionados no centro do container.	Testar »
flex-start	Os itens são posicionados no início do container.	Testar »
flex-end	Os itens são posicionados no fim do container.	Testar »
baseline	Os itens são posicionados na linha de base do container.	Testar »
initial	Faz a propriedade usar seu valor padrão.	Testar »
inherit	Herda a propriedade do elemento pai.

Problemas comuns

stretch não tem efeito se os itens possuem tamanho fixo no eixo transversal. Se um item já tem height definido (em um container row), stretch não pode expandi-lo. Remova o tamanho fixo para permitir o esticamento.
Nada acontece sem um container flex/grid. align-items é ignorado a menos que o pai tenha display: flex ou display: grid.
O eixo muda com flex-direction: column. Nesse caso, align-items controla o alinhamento horizontal, não o vertical.
Para alinhar apenas um item, use align-self naquele item, em vez de alterar o container inteiro.

Propriedades relacionadas

justify-content — alinhamento ao longo do eixo principal.
align-self — substitui align-items para um único item.
align-content — alinha linhas quebradas como um grupo.
flex-direction — escolhe qual eixo é o principal.

Prática

Quais são os valores possíveis para a propriedade 'align-items' em CSS?