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.

Tutorial CSS:CSS Grid

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

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

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

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.

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"

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