Atributo flex-flow do CSS

Definição e uso

A propriedade flex-flow é uma abreviação das seguintes propriedades:

Nota:Se o elemento não for um item flexível, a propriedade flex é inválida.

Veja também:

Tutorial do CSS:Caixa flexível do CSS

Manual de referência do CSS:Propriedade flex

Manual de referência do CSS:Propriedade flex-direction

Manual de referência do CSS:Propriedade flex-basis

Manual de referência do CSS:Propriedade flex-grow

Manual de referência do CSS:Propriedade flex-shrink

Manual de referência do CSS:Propriedade flex-wrap

Manual de referência do HTML DOM:Propriedade flexFlow

Exemplo

Exiba o item flexível em ordem inversa e faça quebradeira na linha conforme necessário:

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

Experimente você mesmo

Sintaxe do CSS

flex-flow: flex-direction flex-wrap|initial|inherit;

Valor do atributo

Valor Descrição
flex-direction

Valores possíveis:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

O valor padrão é "row".

Determina a direção do item flexível.
flex-wrap

Valores possíveis:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

O valor padrão é "nowrap".

Determina se o item flexível deve quebrar linha.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: row nowrap
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.flexFlow="column nowrap"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade, antes de usar o prefixo -webkit-, -ms- ou -moz-.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0