CSS: “align-items”: “auto” não é um valor de “align-items”.

A propriedade align-items controla como os itens flex ou grid são alinhados ao longo do eixo transversal do seu contentor. Embora muitas propriedades CSS aceitem auto como valor, align-items não é uma delas. A especificação CSS define um conjunto específico de valores aceites, e usar auto fará com que a declaração seja ignorada pelos navegadores, potencialmente quebrando o layout pretendido.

Este erro frequentemente resulta da confusão com a propriedade relacionada align-self, que aceita auto como o seu valor padrão. Quando align-self está definido para auto, defere para o valor align-items do contentor pai. No entanto, align-items em si não tem tal mecanismo de delegação — é a propriedade que define o alinhamento padrão para todos os itens no contentor.

Os valores válidos para align-items incluem:

• normal — comporta-se como stretch em contentores flex e tem comportamento dependente do contexto noutros modos de layout.
• stretch — os itens são esticados para preencher o contentor ao longo do eixo transversal (o comportamento padrão em flexbox).
• center — os itens são centralizados ao longo do eixo transversal.
• flex-start / start — os itens são alinhados ao início do eixo transversal.
• flex-end / end — os itens são alinhados ao fim do eixo transversal.
• baseline / first baseline / last baseline — os itens são alinhados com base nas suas linhas de base de texto.
• self-start / self-end — os itens são alinhados com base no seu próprio modo de escrita.

Se pretendia o comportamento padrão, use stretch (para flexbox) ou normal. Se estava a tentar redefinir a propriedade, use initial, unset, ou revert em vez de auto.

Exemplos

Incorreto: usar auto como valor

<div style="display: flex; align-items: auto;">
  <p>Item um</p>
  <p>Item dois</p>
</div>

Isto desencadeia o erro de validação porque auto não é um valor reconhecido para align-items.

Corrigido: usar stretch para o comportamento padrão de flexbox

<div style="display: flex; align-items: stretch;">
  <p>Item um</p>
  <p>Item dois</p>
</div>

Corrigido: usar center para centralizar itens

<div style="display: flex; align-items: center;">
  <p>Item um</p>
  <p>Item dois</p>
</div>

Corrigido: usar flex-start para alinhar itens ao topo

<div style="display: flex; align-items: flex-start;">
  <p>Item um</p>
  <p>Item dois</p>
</div>

Uso correto de auto com align-self

Se a sua intenção era permitir que um item filho específico deferisse para o alinhamento do seu pai, use align-self: auto no elemento filho em vez disso:

<div style="display: flex; align-items: center;">
  <p>Item centralizado</p>
  <p style="align-self: auto;">Também centralizado (defere para o pai)</p>
  <p style="align-self: flex-end;">Alinhado ao fim</p>
</div>

Aqui, align-self: auto é válido em itens individuais e diz-lhes para herdar o valor align-items do contentor.

Saiba mais:

MDN Reference

MDN: CSS align-items

→