[CSS] Flexbox - 축과 정렬 정리

Flexbox에서 정렬을 이해하려면
주축(Main Axis) 과 교차축(Cross Axis) 개념을 먼저 알아야 합니다.

 

1. 주축(Main Axis)과 교차축(Cross Axis)

• 주축(Main Axis)
  → flex-direction으로 결정되는 방향
  • row : 가로
  • column : 세로
• 교차축(Cross Axis)
  → 주축과 수직인 방향

즉, flex-direction이 바뀌면
justify-content와 align-items의 기준 축도 함께 바뀝니다.

 

 

2. justify-content

주축(Main Axis) 방향 정렬

.container {
  display: flex;
  justify-content: center;
}

• 주축을 기준으로 아이템들의 배치 위치를 결정
• 아이템 간 간격과 정렬 방식을 제어

주요 값:

• flex-start : 시작점 정렬
• center : 가운데 정렬
• flex-end : 끝점 정렬
• space-between : 양 끝 배치 + 사이 균등
• space-around : 양옆 여백 포함 균등
• space-evenly : 완전 균등 간격

 

3. align-items

 

교차축(Cross Axis) 방향 정렬

.container {
  display: flex;
  align-items: center;
}

• 교차축 기준으로 아이템들의 위치를 정렬
• 한 줄(line) 안에서의 정렬을 담당

주요 값:

• stretch (기본값) : 컨테이너에 맞게 늘어남
• flex-start : 시작점 정렬
• center : 중앙 정렬
• flex-end : 끝점 정렬
• baseline : 텍스트 기준선 정렬

4. 정리하면

• justify-content = 방향 정렬
• align-items = 축 수직 정렬
• 기준은 항상 flex-direction