4. justify-content

1. 개념

justify-content는 Flexbox(플렉스박스) 나 Grid 레이아웃에서 사용하는 속성으로,
주축(main axis) 방향으로 아이템들을 어떻게 정렬하고, 남는 공간을 어떻게 분배할지를 결정하는 속성입니다.

즉, “가로 방향(또는 세로 방향, flex-direction에 따라 달라짐)”에서
아이템들의 위치와 간격을 제어하는 속성입니다.

 

2. 주축(Main Axis)의 개념

Flexbox에서 주축(Main Axis) 은 아이템들이 배치되는 기본 방향을 의미합니다.
즉, 자식 요소(flex item)들이 나열되는 “기준 축”입니다.

모든 정렬 관련 속성 — 특히 justify-content 와 align-items — 은
이 주축과 교차축(Cross Axis)의 방향에 따라 동작 방식이 달라집니다.

---

3. 주축은 flex-direction의 속성

flex-direction 속성이 바로 주축의 방향을 정의하는 속성입니다.
즉, flex-direction 의 값이 무엇이냐에 따라
주축이 가로로 갈지, 세로로 갈지가 완전히 바뀝니다.

 

 

flex-direction 값	주축 방향	교차축 방향	설명
row	가로 (왼쪽 → 오른쪽)	세로 (위 → 아래)	기본값. 아이템이 가로로 나열됨
row-reverse	가로 (오른쪽 → 왼쪽)	세로 (위 → 아래)	가로 방향은 동일하지만, 순서만 반대로
column	세로 (위 → 아래)	가로 (왼쪽 → 오른쪽)	아이템이 세로로 쌓임
column-reverse	세로 (아래 → 위)	가로 (왼쪽 → 오른쪽)	세로 방향은 같지만, 순서만 반대로

 

4. 예시

4-1 fiex-start

 

4-2 center

4-3 space-around

4.4 space-between

5. 요약

flex-start	[A][B][C]⠀⠀⠀⠀⠀⠀⠀⠀⠀
flex-end	⠀⠀⠀⠀⠀⠀⠀⠀⠀[A][B][C]
center	⠀⠀⠀[A][B][C]⠀⠀⠀
space-around	⠀[A]⠀[B]⠀[C]⠀
space-evenly	[A]⠀[B]⠀[C] (컨테이너 끝과 아이템 간격까지 동일)