Propriedade CSS flex-direction

A propriedade flex-direction define o eixo principal de um contêiner flex, que é a direção ao longo da qual seus itens flex são dispostos. Ao alternar o eixo principal entre horizontal e vertical (e opcionalmente invertê-lo), uma única propriedade controla se os itens fluem em linha ou em coluna. É uma das propriedades CSS3 e faz parte do módulo de Layout de Caixa Flexível.

A propriedade não tem efeito por si só — o elemento deve primeiro ser um contêiner flex, que você cria com display: flex (ou inline-flex). Uma vez configurado, cada filho direto torna-se um item flex que segue a direção escolhida.

Os itens flex podem ser exibidos:

horizontalmente da esquerda para a direita (flex-direction: row) ou da direita para a esquerda (flex-direction: row-reverse)
verticalmente de cima para baixo (flex-direction: column) ou de baixo para cima (flex-direction: column-reverse)

Eixo principal e eixo transversal

O Flexbox sempre trabalha com dois eixos. O eixo principal é o escolhido pelo flex-direction; os itens são posicionados um após o outro ao longo dele. O eixo transversal é perpendicular a ele. Isso importa porque as propriedades de alinhamento dependem de qual eixo é qual:

justify-content alinha os itens ao longo do eixo principal.
align-items alinha os itens ao longo do eixo transversal.

Portanto, quando você define flex-direction: column, o eixo principal torna-se vertical — e justify-content passa a controlar o posicionamento vertical enquanto align-items controla o posicionamento horizontal. Usar a propriedade errada é o erro mais comum com Flexbox, e quase sempre está relacionado ao valor de flex-direction em uso.

Os valores *-reverse invertem a ordem em que os itens são renderizados, mas não alteram a ordem de origem do seu HTML — importante para acessibilidade, pois leitores de tela e foco de teclado ainda seguem a ordem do DOM, não a visual.

Informação

Se não houver itens flex (o contêiner não tiver filhos diretos), a propriedade flex-direction não terá efeito visível.

Valor Inicial	row
Aplica-se a	Contêineres flex.
Herdada	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.flexDirection = "row-reverse";

Sintaxe

Sintaxe da propriedade CSS flex-direction

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Exemplo da propriedade flex-direction:

Exemplo da propriedade CSS flex-direction com o valor column-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

No exemplo a seguir, os itens são exibidos horizontalmente em linha da direita para a esquerda.

Exemplo da propriedade flex-direction com o valor "row-reverse":

Exemplo da propriedade CSS flex-direction com o valor row-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

A imagem a seguir mostra os itens exibidos em ordem inversa, da direita para a esquerda.

Exemplo da propriedade flex-direction com o valor "row":

Exemplo da propriedade flex-direction com o valor "row"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade flex-direction com o valor "column":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade flex-direction com o valor "column-reverse":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Quando usar cada valor

row (padrão) — barras de navegação horizontais, grupos de botões e qualquer "lista de itens da esquerda para a direita." Raramente é escrito explicitamente, pois já é o valor padrão.
column — empilhar cards, campos de formulário ou itens de barra lateral verticalmente, ainda aproveitando o alinhamento do Flexbox e o controle de gap. Um padrão comum é um layout de página com altura total: display: flex; flex-direction: column; min-height: 100vh com um cabeçalho, uma área principal com flex: 1 e um rodapé.
row-reverse / column-reverse — inverte a ordem visual sem modificar o HTML, por exemplo, espelhando um layout para idiomas da direita para a esquerda ou exibindo a mensagem de chat mais recente na parte inferior mantendo o DOM em ordem cronológica.

Um atalho relacionado, flex-flow, define flex-direction e flex-wrap em uma única declaração — útil quando você também precisa que os itens quebrem em múltiplas linhas.

Suporte a navegadores

flex-direction é suportado em todos os navegadores modernos sem prefixo de fornecedor. Faz parte do modelo Flexbox mais amplo abordado no Guia Definitivo de Flexbox.

Valores

Valor	Descrição	Experimente
row	Os itens são exibidos horizontalmente em linha. Este é o valor padrão desta propriedade.	Experimente »
row-reverse	Os itens são exibidos em linha em ordem inversa (da direita para a esquerda).	Experimente »
column	Os itens são exibidos verticalmente de cima para baixo.	Experimente »
column-reverse	Os itens são exibidos verticalmente de baixo para cima.	Experimente »
initial	A propriedade usa seu valor padrão.	Experimente »
inherit	A propriedade herda o valor do elemento pai.	Experimente »

Prática

Quais dos seguintes são valores válidos para a propriedade CSS flex-direction?