A propriedadeCSSflex-direction define como os itens flexíveis são colocados no contêiner flexível, definindo o eixo principal e a direção (normal ou invertido).

Experimente

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

<section>  <div>    <div>Item One</div>    <div>Item Two</div>    <div>Item Three</div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  width: 80%;  display: flex;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  width: 60px;  margin: 10px;}

Observe que os valoresrow erow-reverse são afetados pela direcionalidade do contêiner flexível. Se seu atributodir forltr,row representa o eixo horizontal orientado da esquerda para a direita, erow-reverse está orientado da direita para esquerda; Se seu atributortl,row representa o eixo orientado da direita para a esquerda erow-reverse da esquerda para a direita.

Syntax

/* The direction text is laid out in a line */flex-direction: row;/* Like <row>, but reversed */flex-direction: row-reverse;/* The direction in which lines of text are stacked */flex-direction: column;/* Like <column>, but reversed */flex-direction: column-reverse;/* Global values */flex-direction: inherit;flex-direction: initial;flex-direction: unset;

Valores

Os seguintes valores são aceitos:

row

O eixo principal do flex container é definido para ser o mesmo que a direção do texto. Ospontos deinício etérmino principais são iguais à direção do conteúdo.

row-reverse

Se comporta da mesma forma querow porém ospontos de início etérmino serão invertidos (permutados).

column

O eixo principal do flex container é igual ao eixo do bloco. Ospontos de início etérmino principais são iguais aos pontos de antes e depois do modo de escrita.

column-reverse

Se comporta da mesma forma quecolumn porém ospontos de início etérmino serão invertidos (permutados).

Formal syntax

flex-direction =
row|
row-reverse|
column|
column-reverse

Example

HTML

<h4>This is a Column-Reverse</h4><div>  <div>A</div>  <div>B</div>  <div>C</div></div><h4>This is a Row-Reverse</h4><div>  <div>A</div>  <div>B</div>  <div>C</div></div>

CSS

#content {  width: 200px;  height: 200px;  border: 1px solid #c3c3c3;  display: flex;  flex-direction: column-reverse;}.box {  width: 50px;  height: 50px;}#content1 {  width: 200px;  height: 200px;  border: 1px solid #c3c3c3;  display: flex;  flex-direction: row-reverse;}.box1 {  width: 50px;  height: 50px;}

Result

Accessibility Concerns

Usar a propriedadeflex-direction com o valores derow-reverse orcolumn-reverse vai criar uma desconexão entre a apresentação visual do conteúdo e a ordem do DOM. Isso afetará adversamente os usuários com problemas de visão navegando com o auxílio de tecnologia assistiva, como um leitor de tela. Se a oredem visual (CSS) for importante, os usuários de leitores de tela não terão acesso à ordem de leitura correta.

• Flexbox & the keyboard navigation disconnect — Tink
• Source Order Matters | Adrian Roselli
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

Specifications

Compatibilidade com navegadores

See also

• CSS Flexbox Guide:Basic Concepts of Flexbox
• CSS Flexbox Guide:Ordering flex items