2. Flex의 방향 설정

1. flex-direction의 개념

flex-direction은 Flexbox(플렉스박스) 레이아웃에서 자식 요소(flex item) 들이 어떤 방향으로 배치될지를 결정하는 속성입니다.
즉, 플렉스 컨테이너의 주축(main axis) 을 설정하여, 아이템들이 가로로 나열될지, 세로로 나열될지를 지정하는 역할을 합니다.

쉽게 말해서,

• "아이템을 가로로 정렬할까?"
• "아이템을 세로로 정렬할까?"
  를 정하는 설정이 바로 flex-direction입니다.

---

2. 기본 동작 원리

Flexbox는 두 개의 축을 기준으로 작동합니다.

이름설명

Main Axis (주축)	아이템이 실제로 정렬되는 방향 (가로 또는 세로)
Cross Axis (교차축)	주축에 수직인 방향 (주축이 가로면 세로, 주축이 세로면 가로)

flex-direction은 이 “주축의 방향”을 바꾸는 속성입니다.

 

3. 예시

3-1. 기본방향

 

• 왼쪽->오른쪽으로 하나씩 쌓이기 시작한다.

 

3-2. 반대방향

 

3-3 열방향 조절

3-4. 열방향 반대

 

 

4. flex-direction의 주요 값

 

속성 값	방향	설명
row	가로 (왼쪽 → 오른쪽)	기본값. 아이템이 왼쪽에서 오른쪽으로 일렬 배치
row-reverse	가로 (오른쪽 → 왼쪽)	순서를 반대로, 오른쪽에서 왼쪽으로 배치
column	세로 (위 → 아래)	아이템이 위에서 아래로 쌓이듯 정렬
column-reverse	세로 (아래 → 위)	순서를 반대로, 아래에서 위로 쌓이는 정렬