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
154
155
|
---
title: flex-direction
slug: Web/CSS/flex-direction
translation_of: Web/CSS/flex-direction
---
<div>{{CSSRef}}</div>
<p><br>
</p>
<p dir="ltr"><strong id="docs-internal-guid-3c370947-7fff-bd87-9412-328b8bc6d405">flex-direction </strong>adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .</p>
<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
<p>Note that the values <code>row</code> and <code>row-reverse</code> are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is <code>ltr</code>, <code>row</code> represents the horizontal axis oriented from the left to the right, and <code>row-reverse</code> from the right to the left; if the <code>dir</code> attribute is <code>rtl</code>, <code>row</code> represents the axis oriented from the right to the left, and <code>row-reverse</code> from the left to the right.</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 <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;
</pre>
<h3 id="Values">Values</h3>
<p>The following values are accepted:</p>
<dl>
<dt><code>row</code></dt>
<dd>The flex container's main-axis is defined to be the same as the text direction. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the content direction.</dd>
<dt><code>row-reverse</code></dt>
<dd>Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted.</dd>
<dt><code>column</code></dt>
<dd>The flex container's main-axis is the same as the block-axis. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <strong>before</strong> and <strong>after</strong> points of the writing-mode.</dd>
<dt><code>column-reverse</code></dt>
<dd>Behaves the same as <code>column</code> but the <strong>main-start</strong> and <strong>main-end</strong> are permuted.</dd>
</dl>
<h2 id="Accessibility_concerns">Accessibility concerns</h2>
<p>Using the <code>flex-direction</code> property with values of <code>row-reverse</code> or <code>column-reverse</code> will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.</p>
<ul>
<li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & 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="Formal_definition">Formal definition</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<h3 id="Reversing_flex_container_columns_and_rows">Reversing flex container columns and rows</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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>
</pre>
<h4 id="CSS">CSS</h4>
<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>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p>
<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-property', 'flex-direction')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<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>
|
