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
tags:
- CSS
- CSS Flexible Boxes
- CSS Property
- Reference
translation_of: Web/CSS/flex-direction
---
<div>{{CSSRef}}</div>
<p><strong><code>flex-direction</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
<p><code>row</code>와 <code>row-reverse</code>의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 <code>dir</code> 값이 <code>ltr</code>이라면 <code>row</code>는 왼쪽부터 시작하는 가로축을, <code>row-reverse</code>는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 <code>dir</code> 값이 <code>rtl</code>이라면 <code>row</code>가 오른쪽부터 시작하는 가로축을, <code>row-reverse</code>가 왼쪽부터 시작하는 가로축을 나타냅니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush:css no-line-numbers">/* 한 줄의 글을 작성하는 방향대로 */
flex-direction: row;
/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;
/* 글 여러 줄이 쌓이는 방향대로 */
flex-direction: column;
/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;
/* 전역 값 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
</pre>
<h3 id="값">값</h3>
<dl>
<dt><code>row</code></dt>
<dd>플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.</dd>
<dt><code>row-reverse</code></dt>
<dd><code>row</code>와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd>
<dt><code>column</code></dt>
<dd>플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.</dd>
<dt><code>column-reverse</code></dt>
<dd><code>column</code>과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}
.box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}
.box1 {
width: 50px;
height: 50px;
}</pre>
<h3 id="결과">결과</h3>
<p>{{ EmbedLiveSample('예제', '', '300') }}</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p><code>flex-direction</code> 속성에 <code>row-reverse</code> 또는 <code>column-reverse</code> 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.</p>
<ul>
<li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li>
<li><a href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
<li><a href="https://developer.mozilla.org/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 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="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>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="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.flex-direction")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
<li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
</ul>
|
