Esta tradução está incompleta. Ajude atraduzir este artigo.
Resumo
A propriedade CSS flex-flow é uma junção das propriedades individuais flex-direction and flex-wrap.
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Aplica-se a | flex containers |
| Inherited | não |
| Midia | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | não |
| Canonical order | order of appearance in the formal grammar of the values |
Veja Using CSS flexible boxes para mais propriedades e informações.
Sintaxe
/* 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'> e <'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
Veja flex-direction e flex-wrap para detalhes sobre seus valores.
Sintaxe Formal
<'flex-direction'> || <'flex-wrap'>
Exemplos
element {
/* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
flex-flow: column-reverse wrap;
}
Especificações
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'flex-flow' in that specification. |
Candidate Recommendation | Initial definition |
Compatibilidade com navegadores
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 28.0 | 21.0-webkit 29.0 |
11 | 12.10 | 6.1-webkit |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 28.0 | ? | 11 | 12.10 | 7.1-webkit |