Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
flex-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 2015.
A propriedadeCSSflex-flow é umajunção das propriedadesflex-direction eflex-wrap.
Experimente
flex-flow: row wrap;flex-flow: row-reverse nowrap;flex-flow: column wrap-reverse;flex-flow: column wrap;<section> <div> <div>Item One</div> <div>Item Two</div> <div>Item Three</div> <div>Item Four</div> <div>Item Five</div> <div>Item Six</div> </div></section>#example-element { border: 1px solid #c5c5c5; width: 80%; max-height: 300px; display: flex;}#example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; width: 60px; margin: 10px;}Sintaxe
css
/* flex-flow: <'flex-direction'> */flex-flow: row;flex-flow: row-reverse;flex-flow: column;flex-flow: column-reverse;/* flex-flow: <'flex-wrap'> */flex-flow: nowrap;flex-flow: wrap;flex-flow: wrap-reverse;/* flex-flow: <'flex-direction'> and <'flex-wrap'> */flex-flow: row nowrap;flex-flow: column wrap;flex-flow: column-reverse wrap-reverse;/* Global values */flex-flow: inherit;flex-flow: initial;flex-flow: unset;Valores
Consulteflex-direction eflex-wrap para ver os detalhes sobre os valores.
Sintaxe formal
flex-flow =
<'flex-direction'>||
<'flex-wrap'>
<flex-direction> =
row|
row-reverse|
column|
column-reverse
<flex-wrap> =
nowrap|
wrap|
wrap-reverse
Exemplos
css
elemento { /* O eixo principal é a direção do bloco com main-start e main-end invertidos. * Os itens flex estão dispostos em múltiplas linhas */ flex-flow: column-reverse wrap;}Especificações
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Aplica-se a | flex containers |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Compatibilidade com navegadores
Veja também
- Guia de Flexbox CSS:Conceitos básicos de flexbox
- Guia de Flexbox CSS:Ordenando itens flex