CSS 플렉스박스(Flexbox)는 요소를 유연하게 배치하고 정렬할 수 있게 해주는 레이아웃 모듈입니다. 부모 요소에 display: flex;를 적용하면 해당 요소가 플렉스 컨테이너가 되며, 자식 요소들은 자동으로 플렉스 아이템으로 변환됩니다.
플렉스 컨테이너에는 아이템의 배치 방향, 줄바꿈 여부, 정렬 방식 등을 제어하는 다양한 속성이 있습니다. 핵심 속성은 다음과 같습니다.
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. flex-direction — 배치 방향 설정
flex-direction은 플렉스 아이템이 배치되는 주축(main axis)의 방향을 결정합니다.
- row (기본값): 아이템을 가로 방향(왼쪽 → 오른쪽)으로 배치합니다.
- row-reverse: 가로 방향의 반대(오른쪽 → 왼쪽)로 배치합니다.
- column: 아이템을 세로 방향(위 → 아래)으로 배치합니다.
- column-reverse: 세로 방향의 반대(아래 → 위)로 배치합니다.
2. flex-wrap — 줄바꿈 여부 설정
flex-wrap은 컨테이너 크기보다 아이템들이 클 때 줄바꿈을 할지 여부를 지정합니다.
- nowrap (기본값): 모든 아이템을 한 줄에 배치하며, 필요시 아이템 크기를 줄입니다.
- wrap: 공간이 부족하면 아래쪽으로 새 줄에 배치합니다.
- wrap-reverse: 공간이 부족하면 위쪽 방향으로 새 줄에 배치합니다.
3. flex-flow — direction과 wrap의 단축 속성
flex-flow는 flex-direction과 flex-wrap을 한 번에 설정할 수 있는 단축(shorthand) 속성입니다.
.container { display: flex; flex-flow: row wrap; }기본값은 row nowrap입니다.
4. justify-content — 주축 정렬 방식
justify-content는 주축(main axis) 방향에서 아이템들을 어떻게 정렬할지 결정합니다.
- flex-start (기본값): 시작점 쪽으로 정렬합니다.
- flex-end: 끝점 쪽으로 정렬합니다.
- center: 가운데 정렬합니다.
- space-between: 첫/마지막 아이템은 양 끝에 붙이고 나머지는 균등한 간격으로 배치합니다.
- space-around: 각 아이템 좌우에 동일한 여백을 두고 배치합니다.
- space-evenly: 모든 간격을 완전히 동일하게 배치합니다.
5. align-items — 교차축 정렬 방식
align-items는 교차축(cross axis) 방향, 즉 한 줄 안에서 아이템들을 어떻게 정렬할지 설정합니다.
- stretch (기본값): 아이템을 교차축 방향으로 늘려 꽉 채웁니다.
- flex-start: 교차축 시작점에 맞춰 정렬합니다.
- flex-end: 교차축 끝점에 맞춰 정렬합니다.
- center: 교차축 기준 가운데 정렬합니다.
- baseline: 텍스트 기준선(baseline)에 맞춰 정렬합니다.
6. align-content — 여러 줄의 정렬 방식
align-content는 flex-wrap: wrap;으로 인해 아이템이 여러 줄로 나뉘었을 때, 줄들 사이의 간격과 전체 정렬 방식을 결정합니다. 아이템이 한 줄일 때는 효과가 없습니다.
- stretch (기본값): 줄들을 늘려 남은 공간을 채웁니다.
- flex-start: 줄들을 시작점 쪽으로 몰아 정렬합니다.
- flex-end: 줄들을 끝점 쪽으로 몰아 정렬합니다.
- center: 줄들을 가운데 정렬합니다.
- space-between / space-around / space-evenly: 줄 사이 간격을 균등하게 분배합니다.
마무리
플렉스 컨테이너 속성만 잘 활용해도 수평·수직 중앙 정렬, 반응형 카드 레이아웃, 내비게이션 바 등 대부분의 UI 구조를 손쉽게 만들 수 있습니다. 각 속성의 축 개념(주축/교차축)을 확실히 이해하는 것이 플렉스박스 마스터의 핵심입니다.