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 ⁨setembro de 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

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <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 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 value	`row`
Aplica-se a	flex containers
Inherited	não
Computed value	as specified
Animation type	discrete

Compatibilidade com navegadores

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1 de jan. de 1970⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content