manual de referência CSS

CSS @regras (RULES)

大全 de propriedades CSS

CSS3 align-Método de uso e exemplo da propriedade content

Descrição

align-content Quando há espaço adicional no eixo horizontal (vertical), a propriedade CSS pode alinhar os elementos do contêiner flexível dentro do contêiner flexível. Essa propriedade não afeta o contêiner flexível de uma linha. Além disso, você pode usar CSS justify-contentA propriedade (alinhamento horizontal) alinha os elementos na linha principal.

A tabela a seguir resume o contexto de uso e o histórico de versões dessa propriedade.

Valor padrão:	stretch
Aplicável a:	Container flexível de múltiplas linhas
Herança:	Nenhum
Animável:	Não.Veja: Propriedade de animação。
Versão do CSS:	CSS3nova funcionalidade
Sintaxe do JavaScript:	object.style.alignContent="center"

align-Sintaxe de uso do content

A sintaxe dessa propriedade é a seguinte:

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

Os exemplos a seguir mostram como usar o alinhamento do CSS align-Atributo content.

Exemplo

　.flex-container {
　　　　　　　　　　　/*　Navegador Safari　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-flex-flow: row wrap;
　　　　　　　　　　　-webkit-align-content: space-around;
　　　　　　　　　　　/*　Sintaxe padrão　*/
　　　　　　　　　　　display: flex;
　　　　　　　　　　　flex-flow: row wrap;
　　　　　　　　　　　align-content: space-around;
　　　　}

Teste e veja‹/›

Valor do atributo

A tabela a seguir descreve os valores deste atributo.

Valor	Descrição
center	O elemento está localizado no centro do contêiner flexível.
flex-start	O elemento está localizado no início do contêiner flexível.
flex-end	O elemento está localizado no extremo direito do contêiner flexível.
space-between	O elemento é distribuído uniformemente no contêiner flexível para que o espaço entre dois elementos adjacentes seja o mesmo.
space-around	O elemento é distribuído uniformemente no contêiner flexível para que o espaço ao redor de cada elemento (ou seja, antes, entre e após) seja o mesmo.
stretch	Estique o elemento para se ajustar ao contêiner flexível. O espaço disponível é distribuído uniformemente entre todos os elementos. Isso é o valor padrão.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o valor calculado da propriedade align do elemento pai.-content。

Compatibilidade do navegador

align-O atributo content é suportado por todos os navegadores populares. O número representa a versão do primeiro navegador que suporta o atributo.

	Firefox 28+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ ^-webkit- Opera 12.1+

Atenção: Apple Safari 7e versões mais recentes para suportar o align-Atributo content, mas precisa-webkit-préfixo, por exemplo-webkit-align-content: center;