[CSS] Flexbox - 배치 방향 개념

1. display: flex

요소를 Flexbox 레이아웃 컨테이너로 만듭니다.
자식 요소들은 자동으로 가로 또는 세로 방향으로 정렬됩니다.

.container {
  display: flex;
}

• 기본 배치 방향은 가로(row)
• 정렬 기준은 주축(main axis) 과 교차축(cross axis)

 

2. flex-direction: row (기본값)

 

자식 요소가 왼쪽 → 오른쪽으로 나열됩니다.

.container {
  display: flex;
  flex-direction: row;
}

• 주축(main axis): 가로
• 교차축(cross axis): 세로
• 메뉴, 버튼 나열 등에 자주 사용

 

3. flex-direction: column

자식 요소가 위 → 아래로 쌓입니다.

.container {
  display: flex;
  flex-direction: column;
}

• 주축(main axis): 세로
• 교차축(cross axis): 가로
• 카드 리스트, 세로 레이아웃에 적합

 

4. 정리하면

• display: flex → Flexbox 시작
• row → 가로 정렬 (기본)
• column → 세로 정렬
• 정렬 기준은 항상 주축(main axis) 기준으로 바뀜