Exemplo
Fazer os itens flexíveis exibir em ordem inversa, e envolvê-se necesarry:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
}
Tente você mesmo " Definição e Uso
A propriedade flex-flow é um atalho para o flex-direção e as propriedades flex-envoltório.
A propriedade flex-direction especifica a direção dos itens flexíveis.
A propriedade flex-envoltório especifica se os itens flexíveis deve envolver ou não.
Note: Se os elementos não são itens flexíveis, a propriedade flex-fluxo não tem efeito.
Valor padrão: | row nowrap |
---|---|
Herdado: | no |
Animatable: | no. Read about animatable |
Versão: | CSS3 |
sintaxe JavaScript: | object .style.flexFlow="column nowrap" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
Propriedade | |||||
---|---|---|---|---|---|
flex-flow | 29,0 21,0 -webkit- | 11.0 | 28,0 18,0 -moz- | 9 6.1 -webkit- | 17,0 |
CSS Syntax
flex-flow:flex-directionflex-wrap |initial|inherit;
Valores de propriedade
Valor | Descrição | Jogue |
---|---|---|
flex-direction | Valores possíveis: linha row-reverse coluna coluna inversa inicial herdar O valor padrão é "row" . Especificando a direcção dos artigos flexíveis | Jogue " |
flex-wrap | Valores possíveis: nowrap embrulho wrap-reverse inicial herdar O valor padrão é "nowrap" . Especificar se os itens flexíveis deve envolver ou não | 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: flex property
CSS Referência: flex-direction property
CSS Referência: flex-wrap property
CSS Referência: flex-basis property
CSS Referência: flex-grow property
CSS Referência: flex-shrink property
HTML DOM de referência: flexFlow property