Propriedade CSS flex-flow

A propriedade CSS flex-flow é uma abreviação que define duas propriedades do flex-container ao mesmo tempo: flex-direction (o eixo ao longo do qual os itens são dispostos) e flex-wrap (se os itens permanecem em uma linha ou quebram para várias). Em vez de escrever ambas as declarações, você as combina em uma única linha, deixando o CSS mais conciso e a intenção mais clara.

Esta propriedade pertence às propriedades do CSS3 e faz parte do módulo de Flexible Box Layout. Ela afeta apenas elementos cujo display está definido como flex ou inline-flex; em elementos não-flex não tem efeito, e se um flex container não possui itens flexíveis, não há nada para dispor.

Esta página aborda a sintaxe de flex-flow, o que cada valor faz e exemplos executáveis para cada combinação comum de direção e quebra.

O que cada valor controla

flex-flow aceita um valor de flex-direction e um valor de flex-wrap, em qualquer ordem:

flex-direction — o eixo principal e a ordem que os itens seguem ao longo dele:
- row (padrão) — da esquerda para a direita.
- row-reverse — da direita para a esquerda.
- column — de cima para baixo.
- column-reverse — de baixo para cima.
flex-wrap — o que acontece quando os itens não cabem em uma linha:
- nowrap (padrão) — todos os itens se comprimem em uma única linha e podem encolher.
- wrap — os itens transbordam para novas linhas na mesma direção.
- wrap-reverse — os itens quebram para novas linhas na direção oposta do eixo transversal.

Como o valor inicial é row nowrap, um flex container sem flex-flow definido dispõe os itens em uma única linha horizontal.

Os navegadores modernos suportam a propriedade flex-flow nativamente sem prefixos de fornecedor.

Valor Inicial	row nowrap
Aplica-se a	Flex containers
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.flexFlow = "column nowrap";

Sintaxe

Sintaxe da propriedade CSS flex-flow

flex-flow: <flex-direction> || <flex-wrap>;
/* or */ initial | inherit;

Quando definimos flex-flow: row wrap;, o primeiro valor define o flex-direction e o segundo define a propriedade flex-wrap. Os dois valores são independentes de ordem porque aceitam palavras-chave diferentes, portanto flex-flow: wrap row; é igualmente válido. Você também pode fornecer apenas um deles — por exemplo, flex-flow: column; mantém o flex-wrap com seu valor padrão nowrap.

Exemplo da propriedade CSS flex-flow

flex-flow: row wrap;

O código a seguir é equivalente ao código acima.

Exemplo das propriedades flex-direction e flex-wrap

flex-direction: row;
flex-wrap: wrap;

Exemplo da propriedade flex-flow com os valores "row" e "wrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade flex-flow com os valores "wrap-reverse" e "column":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade flex-flow com os valores "row" e "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Com flex-flow: row nowrap, todos os seis itens permanecem em uma única linha horizontal e encolhem para caber no container em vez de quebrar:

Exemplo da propriedade flex-flow com os valores "row-reverse" e "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade flex-flow com os valores "column" e "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade flex-flow com os valores "column-reverse" e "nowrap":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
flex-direction	Define a direção dos itens flexíveis. Os valores possíveis são: row row-reverse column column-reverse initial inherit	Experimente »
flex-wrap	Define se os itens flexíveis devem quebrar ou não. Os valores possíveis são: nowrap wrap wrap-reverse initial inherit	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Quando usar flex-flow

Use flex-flow sempre que precisar definir tanto a direção quanto o comportamento de quebra de um flex container. Um padrão comum é uma barra responsiva de itens que deve ficar em linha em telas largas, mas quebrar em múltiplas linhas em telas estreitas — flex-flow: row wrap; resolve isso em uma única declaração. Se você alterar apenas uma das duas sub-propriedades, usar a forma longa flex-direction ou flex-wrap diretamente pode tornar a intenção mais clara. Para uma visão completa de como elas se encaixam, veja o guia completo de flexbox.

Prática

O que está correto sobre a propriedade 'flex-flow' no CSS?

'flex-flow' é uma propriedade abreviada para as propriedades flex-direction e flex-wrap'flex-flow' permite controlar a direção dos itens flexíveisO valor padrão de 'flex-flow' é row-reverse'flex-flow' só pode ter um valor por vezO primeiro valor especificado em 'flex-flow' é o flex-direction e o segundo valor é o flex-wrap