CSS / Flex / flex-direction

flex-direction은 Flex 컨테이너의 주축과 아이템을 배치하는 방향을 정하는 CSS 속성입니다. 기본값 row는 글의 인라인 방향, column은 블록 방향을 따르며 reverse를 붙이면 해당 방향이 뒤집힙니다. 부모에 display: flex 또는 inline-flex가 적용되어 있어야 하며, 아이템 자체에 지정하는 속성이 아닙니다.

네 가지 값과 주축·교차축 이해하기

주축은 아이템이 차례로 놓이는 기준 축이고, 교차축은 그에 수직인 축입니다. 일반적인 한국어 가로쓰기에서 row의 주축은 가로, column의 주축은 세로입니다. 따라서 justify-content는 주축, align-items는 교차축을 기준으로 해석해야 하며 언제나 가로 정렬·세로 정렬이라고 외우면 column에서 혼동하게 됩니다.

위 표는 기본 가로쓰기와 왼쪽에서 오른쪽으로 읽는 ltr 조건의 예입니다. dir="rtl"이나 writing-mode를 바꾸면 row의 시작점과 축의 물리적 방향도 달라질 수 있습니다. row가 모든 문서에서 반드시 왼쪽에서 시작한다는 뜻은 아닙니다.

전체 예제: 같은 HTML 순서로 방향만 비교

아래 코드를 flex-direction.html로 저장하고 브라우저에서 엽니다. 외부 파일은 필요하지 않습니다. 네 상자의 HTML 순서는 모두 가·나·다이며 flex-direction만 다릅니다. 아이템 크기와 gap을 고정해 방향의 차이를 비교하기 쉽게 했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex 방향 네 가지 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    h2 { margin: 14px 0 6px; font-size: 16px; }
    .samples { max-width: 560px; }
    .box { display: flex; gap: 8px; height: 132px; padding: 10px;
      border: 1px solid #88a4b6; background: #eef5f8; }
    .box a { display: grid; place-items: center; flex: none;
      width: 48px; height: 28px; color: white; background: #176b86;
      text-decoration: none; }
    .box a:focus-visible { outline: 3px solid #bc5b00; outline-offset: 2px; }
    .row { flex-direction: row; }
    .row-reverse { flex-direction: row-reverse; }
    .column { flex-direction: column; }
    .column-reverse { flex-direction: column-reverse; }
  </style>
</head>
<body>
<h1>flex-direction 비교</h1>
<div class="samples">
<section><h2>row</h2>
<div class="box row">
  <a href="#result">가</a><a href="#result">나</a><a href="#result">다</a>
</div></section>
<section><h2>row-reverse</h2>
<div class="box row-reverse">
  <a href="#result">가</a><a href="#result">나</a><a href="#result">다</a>
</div></section>
<section><h2>column</h2>
<div class="box column">
  <a href="#result">가</a><a href="#result">나</a><a href="#result">다</a>
</div></section>
<section><h2>column-reverse</h2>
<div class="box column-reverse">
  <a href="#result">가</a><a href="#result">나</a><a href="#result">다</a>
</div></section>
</div>
<p id="result">각 상자의 HTML 순서는 가 → 나 → 다입니다.</p>
</body>
</html>

row에서는 가가 왼쪽, row-reverse에서는 가가 오른쪽에 있습니다. column에서는 가가 맨 위, column-reverse에서는 가가 맨 아래입니다. column으로 바꾼다고 HTML 순서가 바뀌거나 글자가 세로쓰기로 바뀌지는 않습니다.

첫 번째 .row 규칙의 row만 column으로 바꾸어 위아래로 쌓이는지 확인한 다음 복원하세요. gap을 8px에서 12px로 바꾸면 방향에 맞춰 아이템 사이 간격이 늘어납니다. 확인 후 8px로 되돌립니다. 아이템 높이·컨테이너 높이를 크게 바꾸면 축 방향으로 공간이 부족해질 수 있으므로 방향과 크기 문제를 구분하세요.

모바일에서 가로 배치를 세로로 바꾸기

도구 모음처럼 넓을 때는 가로로, 좁을 때는 세로로 배치하려면 미디어 쿼리에서 방향을 바꿉니다. 위 예제 첫 번째 상자의 class에서 row를 toolbar로 바꾸고, style 안의 마지막에 아래 규칙을 추가하면 같은 아이템으로 실습할 수 있습니다.

.toolbar {
  flex-direction: row;
  height: auto;
}
@media (max-width: 640px) {
  .toolbar {
    flex-direction: column;
  }
}

640px 이하에서는 세로, 그보다 넓으면 가로가 됩니다. height: auto는 고정 높이 때문에 세로 항목이 잘리거나 불필요한 빈 공간이 남는 것을 줄입니다. 실습을 되돌리려면 추가한 규칙을 지우고 class를 row로 복원하세요. 여러 줄로 자동 줄바꿈하려는 목적이라면 flex-direction 대신 flex-wrap의 역할도 검토해야 합니다.

reverse와 실제 읽기·키보드 순서의 차이

reverse는 화면에 보이는 배치를 뒤집지만 DOM의 논리적 순서를 바꾸지 않습니다. 기본 링크의 Tab 이동도 HTML 순서를 따르므로 row-reverse의 오른쪽 가에서 시작해 나·다로 이동합니다. 화면 순서만 보고 읽어야 의미가 맞는 절차나 입력 폼을 reverse로 뒤집으면 키보드 사용자와 보조 기술 사용자가 혼란을 겪을 수 있습니다.

중요한 읽기 순서는 HTML에서 먼저 올바르게 작성하세요. 시각적 위치 변경을 보완하려고 양수 tabindex를 여기저기 추가하는 방식은 피하는 편이 좋습니다. 방향을 바꾼 뒤에는 마우스뿐 아니라 Tab으로도 이동하며 포커스 순서와 표시를 확인합니다.

속성의 방향 정의는 MDN flex-direction 문서, 주축과 재배치의 의미는 W3C Flexbox 명세의 방향 규칙에서 확인할 수 있습니다.