Propriedade align-items: Alinhando itens no eixo cruzado

Controle o alinhamento dos itens no eixo perpendicular ao principal.

Enquanto justify-content cuida do alinhamento e distribuição de espaço no eixo principal, a propriedade align-items é aplicada ao Contêiner Flex para controlar como os Itens Flex são alinhados ao longo do eixo cruzado (cross axis).

Lembre-se que o eixo cruzado é sempre perpendicular ao eixo principal.

  • Se flex-direction: row; (eixo principal horizontal), o eixo cruzado é vertical.
  • Se flex-direction: column; (eixo principal vertical), o eixo cruzado é horizontal.

Pense no align-items como o "organizador de altura" em uma prateleira. Se você tem vários objetos (flex-items) em uma prateleira (flex-container), o align-items decide se eles ficam alinhados pelo topo, pela base, pelo centro, ou se esticam para preencher toda a altura da prateleira.

Valores da Propriedade align-items

A propriedade align-items aceita os seguintes valores:

  1. stretch (padrão):

    • Os itens são "esticados" para preencher todo o espaço disponível ao longo do eixo cruzado, respeitando suas min-width/max-width ou min-height/max-height.
    • Se flex-direction: row;, os itens se esticam verticalmente para preencher a altura do contêiner.
    • Se flex-direction: column;, os itens se esticam horizontalmente para preencher a largura do contêiner.

  2. flex-start:

    • Os itens são agrupados no início do eixo cruzado.
    • Se flex-direction: row;, os itens ficam alinhados ao topo.
    • Se flex-direction: column;, os itens ficam alinhados à esquerda.

  3. flex-end:

    • Os itens são agrupados no fim do eixo cruzado.
    • Se flex-direction: row;, os itens ficam alinhados à base.
    • Se flex-direction: column;, os itens ficam alinhados à direita.

  4. center:

    • Os itens são agrupados no centro do eixo cruzado.
    • Se flex-direction: row;, os itens ficam centralizados verticalmente.
    • Se flex-direction: column;, os itens ficam centralizados horizontalmente.

  5. baseline:

    • Os itens são alinhados com base em suas linhas de base de texto. Útil quando você tem itens com diferentes tamanhos de fonte e quer que o texto deles se alinhe.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Align-items</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .flex-container {
      display: flex;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      height: 200px; /* Altura fixa para o contêiner para ver o alinhamento vertical */
      margin-bottom: 20px;
      width: 100%;
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 80px; /* Largura fixa para os itens */
      /* Removendo height para ver o stretch */
    }

    /* Para o exemplo de baseline */
    .flex-item.small-text {
      font-size: 0.8em;
      line-height: 1.2;
    }
    .flex-item.large-text {
      font-size: 1.5em;
      line-height: 1.2;
    }

    /* --- Exemplos de align-items --- */

    .container-stretch {
      align-items: stretch; /* Padrão */
    }

    .container-start {
      align-items: flex-start;
    }

    .container-end {
      align-items: flex-end;
    }

    .container-center {
      align-items: center;
    }

    .container-baseline {
      align-items: baseline;
    }

    /* Exemplo com flex-direction: column */
    .container-column {
      flex-direction: column;
      width: 300px; /* Largura fixa para o contêiner para ver o alinhamento horizontal */
      height: 300px;
      align-items: center; /* Exemplo de align-items em coluna */
    }
  </style>
</head>
<body>
  <h1>Propriedade `align-items`</h1>

  <h2>`align-items: stretch` (Padrão)</h2>
  <div class="flex-container container-stretch">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens esticados para preencher a altura do contêiner.</p>

  <h2>`align-items: flex-start`</h2>
  <div class="flex-container container-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens alinhados ao topo do eixo cruzado.</p>

  <h2>`align-items: flex-end`</h2>
  <div class="flex-container container-end">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens alinhados à base do eixo cruzado.</p>

  <h2>`align-items: center`</h2>
  <div class="flex-container container-center">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens centralizados no eixo cruzado.</p>

  <h2>`align-items: baseline`</h2>
  <div class="flex-container container-baseline">
    <div class="flex-item small-text">Item com texto pequeno</div>
    <div class="flex-item">Item normal</div>
    <div class="flex-item large-text">Item com texto grande</div>
  </div>
  <p>Itens alinhados pela linha de base do texto.</p>

  <h2>`align-items` com `flex-direction: column`</h2>
  <div class="flex-container container-column">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
  <p>Itens centralizados horizontalmente no eixo cruzado.</p>
</body>
</html>

Resultado:

  • Você verá como os itens se alinham de diferentes maneiras ao longo do eixo cruzado (vertical para row, horizontal para column), dependendo do valor de align-items.
  • Observe o comportamento de stretch quando os itens não têm uma altura (ou largura) definida.
  • Veja como baseline alinha o texto, não as caixas dos itens.

Boas Práticas:

  • Entenda o Eixo Cruzado: Assim como em justify-content, é fundamental saber qual é o eixo cruzado (vertical para row, horizontal para column) para prever o comportamento de align-items.
  • Altura/Largura do Contêiner: align-items só terá um efeito visível se o Contêiner Flex tiver espaço extra ao longo do eixo cruzado (por exemplo, uma height definida para flex-direction: row; ou uma width definida para flex-direction: column;).
  • stretch e Dimensões: Se você usar align-items: stretch; e os itens tiverem uma dimensão explícita (ex: height: 50px;), essa dimensão será respeitada e o stretch não terá efeito.

Dominar align-items é crucial para controlar o alinhamento vertical (ou horizontal, se flex-direction: column;) dos seus Itens Flex, garantindo que eles se apresentem de forma organizada e esteticamente agradável.