정의 및 사용 방법

flex-direction 속성은 플렉스 컨테이너의 주 축(main axis)의 방향을 설정하여,
플렉스 아이템이 플렉스 컨테이너 내에 배치되는 흐름 방향을 지정합니다.

'플렉스 레이아웃'은 일반적인 '블록 레이아웃'보다 유연하고 다양한 레이아웃을 구현할 수 있습니다.
특히, '플렉스 레이아웃'을 생성하는 영역인 플렉스 컨테이너 내부에서는 콘텐츠가 플렉스 아이템 단위로 배치됩니다.
이때, flex-direction 속성은 이러한 플렉스 아이템이 배치되는 흐름 방향을 지정합니다.

특징

기본 예제

HTML 
<div class="flex-container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    padding: 10px;
    border: 2px solid silver;
    flex-direction: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/
CSS 데모: flex-direction 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    flex-direction: row | row-reverse | column | column-reverse
}

구문

CSS 
/* 키워드 값 */
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

/* 글로벌 값 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

값

flex-direction 속성의 값
row 초깃값임.
플렉스 컨테이너의 주 축은 텍스트 줄(line box)이 배치되는 방향과 동일합니다.
  • writing-mode 설정이 가로 쓰기 모드로 설정되어 있다면 '가로 축'이 되고, 세로 쓰기 모드로 설정되어 있다면 '세로 축'이 됩니다.
  • 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 플렉스 아이템의 시작쪽은 '왼쪽'입니다.
  • 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 플렉스 아이템의 시작쪽은 '오른쪽'입니다.
  • 텍스트 방향과 상관없이 writing-mode 설정이 세로 쓰기 모드로 설정되어 있다면 플렉스 아이템의 시작쪽은 '위쪽'입니다.
row-reverse 주 축은 row와 동일하지만, 플렉스 아이템의 배치 방향이 반대로 설정됩니다.
  • writing-mode 설정이 가로 쓰기 모드로 설정되어 있다면 '가로 축'이 되고, 세로 쓰기 모드로 설정되어 있다면 '세로 축'이 됩니다.
  • 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 플렉스 아이템의 시작쪽은 '오른쪽'입니다.
  • 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 플렉스 아이템의 시작쪽은 '왼쪽'입니다.
  • 텍스트 방향과 상관없이 writing-mode 설정이 세로 쓰기 모드로 설정되어 있다면 플렉스 아이템의 시작쪽은 '아래쪽'입니다.
column 플렉스 컨테이너의 주 축은 텍스트 줄(line box) 방향과 교차되는 방향과 동일합니다.
  • writing-mode 설정이 가로 쓰기 모드로 설정되어 있다면 '세로 축'이 되고, 세로 쓰기 모드로 설정되어 있다면 '가로 축'이 됩니다.
  • '가로 축'이 주 축일 때, 텍스트 줄이 쌓이는 방향이 LTR(Left-to-Right, 예: writing-mode: vertical-lr, writing-mode: sideways-lr)인 경우 플렉스 아이템의 시작쪽은 '왼쪽'입니다.
  • '가로 축'이 주 축일 때, 텍스트 줄이 쌓이는 방향이 RTL(Right-to-Left, 예: writing-mode: vertical-rl, writing-mode: sideways-rl)인 경우 플렉스 아이템의 시작쪽은 '오른쪽'입니다.
  • '세로 축'이 주 축일 때, 텍스트 방향과 상관없이 플렉스 아이템의 시작쪽은 '위쪽'입니다.
column-reverse 주 축은 column과 동일하지만, 플렉스 아이템의 배치 방향이 반대로 설정됩니다.
  • writing-mode 설정이 가로 쓰기 모드로 설정되어 있다면 '세로 축'이 되고, 세로 쓰기 모드로 설정되어 있다면 '가로 축'이 됩니다.
  • '가로 축'이 주 축일 때, 텍스트 줄이 쌓이는 방향이 LTR(Left-to-Right, 예: writing-mode: vertical-lr, writing-mode: sideways-lr)인 경우 플렉스 아이템의 시작쪽은 '오른쪽'입니다.
  • '가로 축'이 주 축일 때, 텍스트 줄이 쌓이는 방향이 RTL(Right-to-Left, 예: writing-mode: vertical-rl, writing-mode: sideways-rl)인 경우 플렉스 아이템의 시작쪽은 '왼쪽'입니다.
  • '세로 축'이 주 축일 때, 텍스트 방향과 상관없이 플렉스 아이템의 시작쪽은 '아래쪽'입니다.

'세로 쓰기 모드'와 flex-direction

writing-mode가 세로 쓰기 모드일 경우, flex-direction 속성의 방향이 어떻게 달라지는지 라이브 데모로 확인해보세요.

HTML 
<div class="flex-container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    padding: 10px;
    border: 2px solid silver;
    writing-mode: vertical-lr; /* 세로 쓰기 모드 설정 */
    flex-direction: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/
CSS 데모: '세로 쓰기 모드'와 flex-direction 데모 버튼을 클릭해 보세요!

형식 정의

flex-direction 속성의 형식 정의
초깃값 row
적용 요소 플렉스 컨테이너
상속 아니오
애니메이션 아니오

접근성 고려 사항

flex-direction 속성을 사용하면 플렉스 아이템이 플렉스 컨테이너 내에 배치되는 흐름 방향을 유연하고 다양하게 구현할 수 있습니다.
이러한 구현은 시각적 측면에서 매우 유용하게 사용될 수 있지만, 저시력으로 인해 스크린 리더나 접근성 보조 기술을 사용하는 사용자에게는 실제 HTML의 구조와 시각적 순서 상의 차이로 인해 부정적인 영향을 줄 수 있습니다.

# tab 포커스 탐색 제어

특히, 사용자는 웹 페이지에서 사용자가 키보드의 탭(Tab) 키를 눌러 웹 페이지의 포커스가 가능한 요소에 포커스를 맞춰 탐색할 수 있는데 포커스되는 요소의 순서가 시각적 순서와 다른 경우에는 사용자 경험을 방해할 수 있습니다.

예를 들면, 다음과 같은 경우입니다.

HTML 
<div class="flex-container">
    <a href="" class="item">Item-1</a>
    <a href="" class="item">Item-2</a>
    <a href="" class="item">Item-3</a>
</div>
CSS 
.flex-container {
    display: flex;
    flex-direction: reverse; /* 마크업 순서와 시각적 배치 순서가 반대입니다. */
}

이런 경우, HTML의 tabindex 속성을 사용하여, tab 포커스 탐색 순서를 실제 HTML의 구조 순서가 아닌 시각적 순서로 재설정 할 수 있습니다.

HTML 
<div class="flex-container">
    <a href="" class="item" tabindex="3">Item-1</a>
    <a href="" class="item" tabindex="2">Item-2</a>
    <a href="" class="item" tabindex="1">Item-3</a>
</div>

이렇게 하면 시각적 순서와 키보드 순서가 모두 Item-3, Item-2, Item-1이 됩니다.

하지만, 문제는 tabindex 속성으로 설정한 값이 문서 전체의 tab 포커스 탐색 순서에도 영향을 미친다는 것입니다. 즉, tabindex를 사용하면 해당 플렉스 아이템과의 시각적 불일치 문제를 해결할 수 있지만, 문제를 문서 수준으로 옮겨야만 해결될 수 있습니다. 따라서, tab 포커스 탐색 제어 순서처럼 HTML의 구조 순서와 시각적 순서가 불일치하더라도 사용자에게 부정적인 영향은 없는지 먼저 살펴보는 것이 중요합니다.

활용 예제

flex-direction 속성은 화면의 폭이 넓은 데스크톱에서는 아이템을 가로로 배치하고, 폭이 좁은 모바일에서는 세로로 배치하는 반응형 웹 디자인을 구현할 때 매우 쉽고 유용합니다.

다음은 반응형 웹 디자인에 적용한 flex-direction 속성의 사용 예제입니다.

HTML 
<div class="flex-container">
    <div class="item">1번 아이템</div>
    <div class="item">2번 아이템</div>
    <div class="item">3번 아이템</div>
</div>
CSS 
.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    padding: 10px;
    border: 2px solid #333;
    flex-direction: row; /* 데스크톱 디자인에 적용 */
}
.item {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    flex: 1; /* 플렉스 아이템들이 가로로 꽉 차게 설정 */
    text-align: center;
}

@media (max-width: 750px) {
    .flex-container {
        flex-direction: column; /* 모바일 디자인에 적용 */
    }
}
실제 적용된 모습 브라우저 화면 폭을 늘리거나 줄여보세요. 반응형 웹 디자인이 구현됩니다.

브라우저 호환성

flex-direction 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
flex-direction 29 12 22 9

명세서

flex-direction 속성의 명세서 사양
명세서 사양
flex-direction CSS Flexible Box Layout Module Level 1
#flex-direction-property

참고문헌

같이 보기