AAtomic CSS

flex-direction

플렉스 아이템의 방향을 제어하는 속성입니다. 반드시 df(display: flex)와 함께 사용하며, 주축(main axis)의 방향을 결정합니다.

클래스 목록

클래스CSS설명
fdrflex-direction: row기본값. 아이템을 왼쪽에서 오른쪽으로 배치
fdrrflex-direction: row-reverse아이템을 오른쪽에서 왼쪽으로 배치
fdcflex-direction: column아이템을 위에서 아래로 세로 배치
fdcrflex-direction: column-reverse아이템을 아래에서 위로 역순 세로 배치

시각적 비교

각 flex-direction 값에 따라 아이템 1, 2, 3이 어떻게 배치되는지 비교합니다.

Row (좌 → 우) — df fdr

123

기본값. 아이템이 왼쪽에서 오른쪽으로 나란히 배치됩니다

Row Reverse (우 → 좌) — df fdrr

123

아이템이 오른쪽에서 왼쪽으로 역순 배치됩니다

Column (위 → 아래) — df fdc

123

아이템이 위에서 아래로 세로 방향으로 쌓입니다

Column Reverse (아래 → 위) — df fdcr

123

아이템이 아래에서 위로 역순으로 쌓입니다

언제 뭘 쓸까?

상황추천이유
수평 네비게이션, 헤더df fdr기본 가로 배치. 명시적 선언으로 의도 표현
모바일 세로 스택df fdc폼 필드, 카드 내부 등 세로 배치
RTL 레이아웃, 역순 배치df fdrrDOM 변경 없이 시각적 순서 뒤집기
역순 목록, 채팅 UIdf fdcr최신 항목이 아래에 위치하는 역순 스택

클래스별 상세

fdrflex-direction: row

기본값으로, 아이템을 왼쪽에서 오른쪽으로 배치합니다. 명시적으로 행 방향을 선언할 때 사용합니다. 헤더 네비게이션, 버튼 그룹 등 가로 배치가 필요한 대부분의 상황에서 사용합니다.

<!-- 헤더 네비게이션 -->
<header class="df fdr jcsb aic px2rem py16px">
  <div>Logo</div>
  <nav class="df fdr gap2rem">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<!-- 버튼 그룹 -->
<div class="df fdr gap8px">
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">확인</button>
  <button class="py8px px16px bg27272A cFFFFFF br8px bn cp">취소</button>
</div>

자주 쓰는 조합

df fdr jcc aic가로 배치 + 가운데 정렬
df fdr jcsb aic양쪽 끝 배치 (헤더, 네비게이션)
df fdr fww gap16px줄바꿈 허용 가로 배치 (태그 목록)
df fdr gap8px aic가로 배치 + 간격 + 세로 가운데

fdrrflex-direction: row-reverse

아이템을 오른쪽에서 왼쪽으로 배치합니다. DOM 순서를 변경하지 않고 시각적 순서만 뒤집을 때 사용합니다. RTL(우에서 좌) 레이아웃이나 역순 배치가 필요한 경우에 유용합니다.

<!-- 역순 버튼 배치 (확인 버튼을 오른쪽에) -->
<div class="df fdrr gap8px">
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">확인</button>
  <button class="py8px px16px bg27272A cFFFFFF br8px bn cp">취소</button>
</div>

<!-- RTL 스타일 레이아웃 -->
<div class="df fdrr gap2rem p2rem">
  <aside class="bg18181B p2rem br8px">사이드바 (오른쪽)</aside>
  <main class="fg1 bg27272A p2rem br8px">메인 콘텐츠</main>
</div>

접근성 주의

fdrr은 시각적 순서만 변경하며, DOM 순서와 탭 순서는 그대로 유지됩니다. 스크린리더와 키보드 탐색은 DOM 순서를 따르므로, 시각적 순서와 논리적 순서가 다르면 혼란을 줄 수 있습니다.

fdcflex-direction: column

아이템을 위에서 아래로 세로 방향으로 쌓습니다. fdr 다음으로 가장 많이 사용되는 방향입니다. 폼 필드, 카드 내부, 리스트 등 세로 배치가 필요한 곳에서 사용합니다.

<!-- 폼 필드 세로 배치 -->
<form class="df fdc gap12px">
  <input type="text" placeholder="이름" />
  <input type="email" placeholder="이메일" />
  <textarea placeholder="메시지"></textarea>
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">전송</button>
</form>

<!-- 카드 내부 구조 -->
<div class="df fdc gap16px p2rem bg18181B br8px">
  <h3>카드 제목</h3>
  <p>카드 설명 텍스트가 들어갑니다.</p>
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">자세히</button>
</div>

자주 쓰는 조합

df fdc gap8px세로 배치 + 간격 (폼, 목록)
df fdc jcc aic h100vh전체 화면 가운데 정렬
df fdc jcsb h100p세로 양쪽 끝 배치 (상단+하단 고정)
df fdc fg1남은 공간을 세로로 채우는 영역

fdcrflex-direction: column-reverse

아이템을 아래에서 위로 배치합니다. 채팅 메시지처럼 최신 항목이 아래에 위치하면서 스크롤은 위로 확장되는 UI나, 역순 목록에 활용합니다.

<!-- 채팅 메시지 (최신이 아래에) -->
<div class="df fdcr gap8px maxh30rem oya p16px">
  <div class="bg18181B p12px br8px fs14px cA1A1AA">첫 번째 메시지</div>
  <div class="bg18181B p12px br8px fs14px cA1A1AA">두 번째 메시지</div>
  <div class="bg6366F1 p12px br8px fs14px cFFFFFF">최신 메시지 (화면 하단)</div>
</div>

<!-- 역순 알림 목록 -->
<div class="df fdcr gap4px">
  <p class="fs14px c71717A">오래된 알림</p>
  <p class="fs14px c71717A">중간 알림</p>
  <p class="fs14px cFAFAFA fw600">최신 알림</p>
</div>

접근성 주의

fdcr도 fdrr과 마찬가지로 시각적 순서만 역전되며, DOM 순서와 탭 순서는 변하지 않습니다.

반응형 패턴

미디어 쿼리 프리픽스와 조합하면 화면 크기에 따라 방향을 전환할 수 있습니다.

<!-- 데스크탑 가로 → 태블릿 세로 -->
<div class="df fdr md-fdc gap2rem">
  <div class="fg1 bg18181B p2rem br8px">사이드바</div>
  <div class="fg1 bg27272A p2rem br8px">메인 콘텐츠</div>
</div>

<!-- 모바일 세로 → 데스크탑 가로 -->
<div class="df fdc sm-fdr gap16px">
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">버튼 1</button>
  <button class="py8px px16px bg27272A cFFFFFF br8px bn cp">버튼 2</button>
  <button class="py8px px16px bg27272A cFFFFFF br8px bn cp">버튼 3</button>
</div>
클래스 조합동작
df fdr md-fdc기본 가로 → 1024px 이하에서 세로 전환
df fdc sm-fdr기본 세로 → 768px 이하에서 가로 전환
df fdr sm-fdc gap16px기본 가로 → 768px 이하에서 세로 + 간격 유지
df fdc md-fdr lg-fdrr기본 세로 → 태블릿 가로 → 데스크탑 역순 가로

팁 & 주의사항

fdc는 주축을 변경합니다

fdc를 사용하면 주축이 세로가 됩니다. 따라서 jcc(justify-content: center)가 세로 가운데 정렬이 되고, aic(align-items: center)가 가로 가운데 정렬이 됩니다.

gap과 함께 사용하세요

flex-direction과 gap을 함께 사용하면 아이템 사이에 일정한 간격을 쉽게 줄 수 있습니다. 예: df fdc gap16px

reverse는 시각적 순서만 변경합니다

fdrr과 fdcr은 DOM 순서와 탭 순서를 변경하지 않습니다. 스크린리더와 키보드 내비게이션은 여전히 원래 DOM 순서를 따르므로, 접근성에 주의가 필요합니다.

displayflex-wrapjustify-contentalign-itemsorder