flex-flow

A propriedade CSS flex-flow é uma junção das propriedades flex-directionflex-wrap.

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'> 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

Consulte flex-directionflex-wrap para ver os detalhes sobre os valores.

Sintaxe formal

<'flex-direction'> || <'flex-wrap'>

Exemplos

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

Especificação Status Comentário
CSS Flexible Box Layout Module
The definition of 'flex-flow' in that specification.
Candidata a Recomendação Definição inicial
Initial valueas each of the properties of the shorthand:
Aplica-se aflex containers
Inheritednão
Midiavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Compatibilidade de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
flex-flowChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 28
Full support 28
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 28
Full support 28
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9
Full support 9
Full support 7.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também