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 2020.

* Learn more
* See full compatibility
* Report feedback
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             | (en-US)  
  row-reverse     | (en-US)  
  column          | (en-US)  
  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.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-direction-property |

|  |  |
| --- | --- |
| Initial value | `row` |
| Aplica-se a | flex containers |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Ordering flex items (en-US)*