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
/* 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
Example
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
#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 |
Compatibilidade com navegadores
BCD tables only load in the browser
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items