Propriedade de Atalho Flex Flow
Última atualização: 2026-09-13
flex-flow Propriedade de Atalho Flex Flow
O flex-flow é um atalho para as propriedades flex-direction e flex-wrap. Ele define a direção do eixo principal e se os itens quebram de linha em uma única declaração. Como as duas propriedades quase sempre são usadas juntas, o flex-flow deixa o código mais conciso. Seu valor padrão é row nowrap, ou seja, disposição horizontal sem quebra de linha.
| Categoria | |
|---|---|
| Valor Inicial | row nowrap |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex-flow: <flex-direction> || <flex-wrap>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<flex-direction> || <flex-wrap> | Valor | Atalho para direção e quebra de linha |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-flow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： Os dois valores de flex-flow podem ser escritos em qualquer ordem: flex-flow: wrap column é equivalente a flex-flow: column wrap. O navegador reconhece ambos.
Dica： Como flex-direction e flex-wrap quase sempre são definidos juntas, prefira o atalho flex-flow para melhor legibilidade e escrita mais rápida.
❓ Perguntas Frequentes
QO flex-flow pode ter apenas um valor?
ASim. Com um único valor, o navegador decide pelo seu tipo: um valor de direção como row ou column deixa flex-wrap no padrão nowrap, enquanto um valor de quebra como wrap ou nowrap deixa flex-direction no padrão row. Esse comportamento é definido na especificação, então raramente você precisa escrever ambos os valores quando um deles já corresponde ao padrão.
QHá diferença de desempenho entre usar flex-flow e definir flex-direction e flex-wrap separadamente?
ANão. O flex-flow é puramente um atalho sintático: após a análise, tem exatamente o mesmo efeito de escrever flex-direction e flex-wrap separadamente. A escolha é uma questão de estilo de código. Quando você define as duas semânticas de uma vez, o flex-flow é mais compacto; quando precisa sobrescrever uma única propriedade, por exemplo alterando apenas a quebra de linha dentro de uma media query, a forma completa facilita a edição local.
QExiste diferença entre flex-flow: column wrap e flex-flow: wrap column?
ANão. O flex-flow é o atalho para flex-direction e flex-wrap, e a especificação usa || para indicar que os dois valores podem ser escritos em qualquer ordem, então column wrap e wrap column são equivalentes. Essa ordem intercambiável é apenas uma conveniência sintática da gramática do atalho; não afeta os valores calculados nem o desempenho. Observe que, com um eixo principal em coluna, a quebra de linha ocorre na direção horizontal e as novas colunas se empilham à direita.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Direção do Eixo Principal
Define a direção do eixo principal em um layout flex
Flex Wrap
Controla se os itens flex quebram em várias linhas
