Exemplo
Posicione os itens da flexível <div> elemento com espaço entre as linhas:
// Code for Safari 7.0+
document.getElementById("main").style.WebkitAlignContent = "space-between";
// Standard syntax
document.getElementById("main").style.alignContent
= "space-between";
Tente você mesmo " Definição e Uso
A propriedade alignContent alinha itens do recipiente flexível quando os itens não use todo o espaço disponível no eixo transversal (vertically) .
Dica: Use a propriedade justifyContent para alinhar os itens no principal eixo (horizontally) .
Nota: Deve haver várias linhas de itens para esta propriedade para ter qualquer efeito.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.
Números seguidos de Webkit especificar a primeira versão que trabalhou com um prefixo.
Propriedade | |||||
---|---|---|---|---|---|
alignContent | 21,0 | 11,0 | 28,0 | 7,0 Webkit | 12.1 |
Nota: Safari apoiar uma alternativa, a propriedade WebkitAlignContent.
Sintaxe
Devolver o imóvel alignContent:
object .style.alignContent
Defina a propriedade alignContent:
object .style.alignContent="stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Valores de propriedade
Valor | Descrição |
---|---|
stretch | Valor padrão. Os produtos são esticados para se ajustar ao recipiente |
center | Os produtos são posicionadas no centro do recipiente |
flex-start | Os produtos são posicionados no início do recipiente |
flex-end | Os produtos são posicionados na extremidade do recipiente |
space-between | Os produtos são posicionados com o espaço entre as linhas |
space-around | Os produtos são posicionados com espaço antes, entre e depois das linhas |
initial | Define essa propriedade para seu valor padrão. Leia sobre inicial |
inherit | Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar |
Detalhes técnicos
Valor padrão: | esticam |
---|---|
Valor de retorno: | Uma corda, que representa a propriedade ALIGN-teor de um elemento |
CSS Versão | CSS3 |
Páginas relacionadas
Referência CSS: align-content property
HTML DOM estilo de referência: alignItems property
HTML DOM estilo de referência: alignSelf property
HTML DOM estilo de referência: justifyContent property
<Estilo de objeto