Propriedade align-content CSS

Definição e uso

propriedade align-content modificação de propriedade propriedade flex-wrap comportamento da propriedade. Ele é semelhante a align-items Similar, mas ao invés de alinhar itens elásticos, alinha linhas elásticas.

Atenção:É necessário ter itens em várias linhas para que essa propriedade funcione!

Dica:Usar justify-content A propriedade alinha itens horizontalmente no eixo principal (main-axis).

Veja também:

Tutorial CSS:Flexbox do CSS

Tutorial CSS:CSS Grid

Manual de referência CSS:Propriedade alignItems

Manual de referência CSS:Propriedade alignSelf

Manual de referência CSS:Propriedade justifyContent

Manual de referência HTML DOM:Propriedade alignContent

Exemplo

Empacote as linhas no centro do contêiner elástico:

div {
  width: 70px;
  height: 300px;
  border: 1px sólido #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Experimente você mesmo

Sintaxe CSS

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Valor da propriedade

Valor Descrição
stretch Valor padrão. As linhas se estendem para ocupar o espaço restante.
center Empacota as linhas no centro do contêiner elástico.
flex-start Empacota as linhas na extremidade inicial do contêiner elástico.
flex-end Empacota as linhas na extremidade final do contêiner elástico.
space-between As linhas são distribuídas uniformemente no contêiner elástico.
space-around As linhas são distribuídas uniformemente no contêiner elástico, com metade em cada extremidade.
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.alignContent="center"

Suporte do navegador

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

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