files/pt-br/web/css/flex-direction/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

---
title: flex-direction
slug: Web/CSS/flex-direction
tags:
  - CSS
  - CSS Flexbox
  - Documentação
  - Propriedade CSS
translation_of: Web/CSS/flex-direction
---
<div>{{CSSRef}}</div>

<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-direction</code></strong> 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).</p>

<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>


<p>Observer que os valores <code>row</code> e <code>row-reverse</code> são afetados pela direcionalidade do contêiner flexível. Se seu atributo {{HTMLAttrxRef("dir")}} for <strong><code>ltr</code></strong>, <strong><code>row</code></strong> representa o eixo horizontal orientado da esquerda para a direita, e <code>row-reverse</code> está orientado da direita para esquerda; Se seu atributo  <strong><code>rtl</code></strong>, <strong><code>row</code> </strong> representa o eixo orientado da direita para a esquerda e  <code>row-reverse</code> da esquerda para a direita.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css no-line-numbers notranslate">/* The direction text is laid out in a line */
flex-direction: row;

/* Like &lt;row&gt;, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like &lt;column&gt;, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
</pre>

<h3 id="Valores">Valores</h3>

<p>Os seguintes valores são aceitos:</p>

<dl>
 <dt><code>row</code></dt>
 <dd>O eixo principal do flex container é definido para ser o mesmo que a direção do texto. Os <strong>pontos de</strong> <strong>início </strong>e <strong>término </strong>principais são iguais à direção do conteúdo.</dd>
 <dt><code>row-reverse</code></dt>
 <dd>Se comporta da mesma forma que <code>row</code> porém os <strong>pontos de inicio</strong> e <strong>término </strong> seram invertidos (permutados).</dd>
 <dt><code>column</code></dt>
 <dd>O eixo principal do flex container é igual ao eixo do bloco. Os <strong>pontos de início</strong> e <strong>término </strong>principais são iguais aos pontos de antes e depois do modo de escrita.</dd>
 <dt><code>column-reverse</code></dt>
 <dd>Se comporta da mesma forma que <code>column</code> porém os <strong>pontos de</strong> <strong>inicio </strong>e <strong>término </strong> seram invertidos (permutados).</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Example">Example</h2>

<h3 id="HTML">HTML</h3>

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">#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;
}</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction')}}</p>

<h2 id="Accessibility_Concerns">Accessibility Concerns</h2>

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

<ul>
 <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
 <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
 <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("css.properties.flex-direction")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
</ul>