flex-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

A propriedade CSS flex-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

Observe que os valores row e row-reverse são afetados pela direcionalidade do contêiner flexível. Se seu atributo dir for ltr, row representa o eixo horizontal orientado da esquerda para a direita, e row-reverse está orientado da direita para esquerda; Se seu atributo rtl, row representa o eixo orientado da direita para a esquerda e row-reverse da esquerda para a direita.

Syntax

css
/* 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. Os pontos de início e término principais são iguais à direção do conteúdo.

row-reverse

Se comporta da mesma forma que row porém os pontos de início e término serão invertidos (permutados).

column

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

column-reverse

Se comporta da mesma forma que column porém os pontos de início e término serão invertidos (permutados).

Formal syntax

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

Example

HTML

html
<h4>This is a Column-Reverse</h4>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
  <div class="box1" style="background-color:red;">A</div>
  <div class="box1" style="background-color:lightblue;">B</div>
  <div class="box1" style="background-color:yellow;">C</div>
</div>

CSS

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 propriedade flex-direction com o valores de row-reverse or column-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.

Specifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-direction-property
Initial valuerow
Aplica-se aflex containers
Inheritednão
Computed valueas specified
Animation typediscrete

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-direction
column
column-reverse
row
row-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also