Atributo align-items CSS

Definição e uso

align-items Propriedade para especificar o alinhamento padrão dos itens dentro do contêiner flexível.

Dica:Use a propriedade de cada item align-self propriedades para sobrescrever essa propriedade alignItems.

Veja também:

Tutorial CSS:CSS Grid

Tutorial CSS:Flexbox do CSS

Manual CSS:Propriedade alignContent

Manual CSS:Propriedade alignSelf

Manual CSS:Propriedade justifyContent

Manual CSS:Propriedade justifyItems

Manual CSS:Propriedade justifySelf

Manual do HTML DOM:Propriedade alignItems

Exemplo

Centralize todos os itens do elemento <div> flexível:

div {
  display: flex;
  align-items: center;
}

Experimente você mesmo

Sintaxe CSS

align-items: stretch|center|flex-start|flex-end|linha de base|initial|inherit;

Valor da propriedade

Valor Descrição
stretch Padrão. O item é esticado para se ajustar ao contêiner.
center O item está no centro do contêiner.
flex-start O item está no início do contêiner.
flex-end O item está na extremidade do contêiner.
linha de base O item é posicionado na linha de base do contêiner.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: stretch
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.alignItems="center"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0