Exemplo
linhas de embalagem para o centro do recipiente Flex:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Tente você mesmo " Definição e Uso
A propriedade align-content modifica o comportamento da propriedade flex-envoltório. É semelhante ao alinhar-itens, mas em vez de alinhar itens de flex, ele se alinha flex linhas.
Dica: Use a justificar-content propriedade para alinhar os itens no principal eixo (horizontally) .
Nota: Deve haver várias linhas de itens para esta propriedade para ter qualquer efeito.
| Valor padrão: | stretch |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.alignContent="center" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguidos de -webkit- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| align-content | 21,0 | 11.0 | 28,0 | 9 7.0 -webkit- | 12.1 |
CSS Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| stretch | Valor padrão. Linhas esticar para ocupar o espaço restante | Jogue " |
| center | As linhas são embalados na direcção do centro do recipiente flexível | Jogue " |
| flex-start | As linhas são embalados para o início do recipiente flexível | Jogue " |
| flex-end | As linhas são embalados para a extremidade do recipiente flexível | Jogue " |
| space-between | As linhas são distribuídas uniformemente no recipiente flexível | Jogue " |
| space-around | As linhas são distribuídas uniformemente no recipiente flexível, com espaços metade do tamanho em cada extremidade | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
CSS Referência: align-items property
CSS Referência: align-self property
CSS Referência: justify-content property
HTML DOM de referência: alignContent property