flex-direction CSS property는 flex container 내부에 flex-item 요소들을 어떻게 배열할 것인지를 설정합니다. flex-item 요소들의 배치를 x축(row)으로 할 것인지, y축(column)으로 할 것인지 결정합니다.

(참고) row값과, row-reverse의 경우 flex-container(부모 엘리먼트)방향성에 따라 영향을 받게 됩니다. 만약 flex-container의 속성이 ltr 이라면, row 값을 설정할 때 수평 축을 따라서 왼쪽에서 오른쪽으로 flex-item들이 배치되며, row-reverse 값을 설정하면 오른쪽에서 왼쪽으로 배치됩니다. 만약 flex-container의 속성이 rtl 이라면, 위와 반대로 배치되는 결과를 기대할 수 있습니다.

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;

Values

아래는 사용 가능한 속성값들입니다:

row
flex-container의 컨텐츠 배치를 결정하는 축은, 텍스트의 방향과 동일한 결과를 기대할 수 있습니다. 예를들어 한국어나 영어는 왼쪽에서 오른쪽으로 읽고 아랍어는 오른쪽에서 왼쪽으로 읽습니다. 즉, main-start/main-end 의 기준점은 내부 컨텐츠 방향과 같습니다.
row-reverse
동작은 row 속성과 동일하게 행동하지만, main-start/main-end 의 기준점이 반대로 되어있습니다.
column
flex container의 컨텐츠 배치를 결정하는 축은, block 요소 방향 축과 동일한 결과를 기대할 수 있습니다. main-start/main-end 의 기준점은 쓰기모드의 before/after 의 기준점과 동일합니다.
column-reverse
동작은 column 속성과 동일하게 행동하지만, main-start/main-end 의 기준점이 반대로 되어있습니다.

Formal syntax

row | row-reverse | column | column-reverse

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: -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;
}

Result

Accessibility Concerns

flex-direction 속성에 reverse 값을 사용할 때, 실제 DOM 구조 순서와 화면에 보이는 순서가 다르기 때문에 접근성 이슈가 발생할 수 있습니다. 이는 screen reader 기기와 같은 접근성 도구를 사용하는 유저들에게 완벽한 UX를 제공할 수 없는 문제가 있습니다. 만약 비주얼적인 순서를 위해 해당 속성을 사용한다면, 개발자는 screen reader 기기를 사용하는 유저들에게 정확한 순서를 보장할 수 없음을 인지해야 합니다.

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-direction' in that specification.
Candidate Recommendation Initial definition

초기값row
적용대상flex containers
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 20
Notes
Full support 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
No support 18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Requires the vendor prefix: -ms-
Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 7
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android ? Opera Android Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: limjungmok, dbwodlf3
최종 변경자: limjungmok,