Propriedade alignContent do Style

Definição e uso

Quando os itens não usam todo o espaço disponível no eixo horizontal (vertical),alignContent Alinhar os itens do contêiner flexível usando o atributo.

Dica:Use Propriedade justifyContent Alinhar os itens no eixo principal (horizontal).

Observação:É necessário ter várias linhas de itens para que este atributo funcione.

Exemplo

Coloque os itens do elemento <div> flexível entre as linhas com espaço:

document.getElementById("main").style.alignContent = "space-between";

Experimente você mesmo

Sintaxe

Retornar o atributo alignContent:

object.style.alignContent

Definir o atributo alignContent:

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

Valor do atributo

Valor Descrição
stretch Valor padrão. As linhas se esticam para ocupar o espaço restante.
center Os projetos ficam no centro do contêiner.
flex-start Os projetos ficam no início do contêiner.
flex-end Os projetos ficam no extremo do contêiner.
space-between Os projetos ficam entre as linhas com espaço.
space-around Os projetos têm espaços em branco antes, entre e após as linhas.
initial Defina este atributo para seu valor padrão. Veja também initial.
inherit Herda este atributo do elemento pai. Veja também inherit.

Detalhes técnicos

Valor padrão: stretch
Retorno: Cadeia de caracteres que representa o Atributo align-content.
Versão do CSS: CSS3

Suporte do navegador

alignContent É uma característica CSS3 (1999).

Todos os navegadores suportam completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Suportado Suportado Suportado Suportado Suportado 11

Páginas relacionadas

Manual de REFERÊNCIA CSS：Atributo align-content

Manual de ESTILO DOM HTML：Atributo alignItems

Manual de ESTILO DOM HTML：Atributo alignSelf

Manual de ESTILO DOM HTML：Propriedade justifyContent