--- title: flex-direction slug: Web/CSS/flex-direction tags: - CSS - CSS Flexible Boxes - CSS Property - Reference translation_of: Web/CSS/flex-direction ---
{{CSSRef}}

flex-direction CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

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

row와 row-reverse의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 dir 값이 ltr이라면 row는 왼쪽부터 시작하는 가로축을, row-reverse는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 dir 값이 rtl이라면 row가 오른쪽부터 시작하는 가로축을, row-reverse가 왼쪽부터 시작하는 가로축을 나타냅니다.

구문

/* 한 줄의 글을 작성하는 방향대로 */
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;

값

row
플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.
row-reverse
row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.
column
플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.
column-reverse
column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.

형식 구문

{{csssyntax}}

예제

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

결과

{{ EmbedLiveSample('예제', '', '300') }}

접근성 고려사항

flex-direction 속성에 row-reverse 또는 column-reverse 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.

명세

Specification Status Comment
{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}} {{Spec2('CSS3 Flexbox')}} Initial definition

{{cssinfo}}

브라우저 호환성

{{Compat("css.properties.flex-direction")}}

같이 보기