flex-flow

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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
Computed valueas each of the properties of the shorthand:
Animation typediscrete

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
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
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