CSS Flexbox 완벽 정리 — 10분 만에 레이아웃 마스터하기

왜 Flexbox가 웹 개발의 핵심인가?

웹 개발에서 레이아웃은 항상 가장 큰 고통이었습니다. float, inline-block, position 같은 속성들로 억지로 배치하던 시절이 있었죠. Flexbox는 이 모든 고통을 단 한 줄로 해결합니다.

현재 전 세계 웹사이트의 90% 이상이 Flexbox를 사용하고 있으며, 모든 모던 브라우저에서 완벽하게 지원됩니다. 프론트엔드 개발자 채용 면접에서도 Flexbox는 필수 질문입니다.

핵심 개념: 축(Axis)을 이해하자

Flexbox에는 두 개의 축이 있습니다. 이 개념만 확실히 이해하면 나머지는 자연스럽게 따라옵니다.

주축(Main Axis) — 아이템이 배치되는 방향. 기본값은 가로(row)입니다.

교차축(Cross Axis) — 주축에 수직인 방향. row면 세로, column이면 가로가 됩니다.

flex-direction 속성으로 주축을 변경할 수 있습니다. row(가로), column(세로), row-reverse(역가로), column-reverse(역세로) 4가지 옵션이 있죠.

부모(Container)에 쓰는 속성 5가지

1. display: flex

모든 것의 시작입니다. 부모 요소에 display: flex를 주는 순간, 자식 요소들이 한 줄로 정렬됩니다. 이것만으로도 기존 float 레이아웃보다 훨씬 깔끔합니다.

2. justify-content — 주축 정렬

주축 방향으로 아이템을 어떻게 배치할지 결정합니다. center(가운데), space-between(양 끝 + 균등), space-around(양쪽 여백 균등), flex-start(시작점), flex-end(끝점).

3. align-items — 교차축 정렬

교차축 방향의 정렬입니다. center(가운데), flex-start(위), flex-end(아래), stretch(꽉 채움). 높이가 다른 아이템들을 정렬할 때 특히 유용합니다.

4. flex-wrap

flex-wrap: wrap을 주면 아이템이 넘칠 때 다음 줄로 넘어갑니다. 반응형 레이아웃의 핵심입니다.

5. gap

아이템 사이의 간격을 설정합니다. gap: 16px이면 모든 아이템 사이에 16px 간격이 생깁니다. margin으로 일일이 설정하던 시절은 끝났습니다.

자식(Item)에 쓰는 속성 3가지

flex: 1 — 가장 많이 쓰는 속성

남은 공간을 균등 분배합니다. 두 개의 자식에 각각 flex: 1을 주면 50:50으로 나뉘고, 하나에 flex: 2를 주면 2:1 비율이 됩니다.

flex-grow, flex-shrink, flex-basis

비율을 더 세밀하게 조정하는 3가지 속성입니다. flex: 1은 사실 flex-grow: 1; flex-shrink: 1; flex-basis: 0%의 축약형입니다.

align-self

개별 아이템만 따로 정렬하고 싶을 때 사용합니다. 부모의 align-items를 덮어씁니다.

실전에서 가장 많이 쓰는 패턴 3가지

패턴 1: 네비게이션 바

로고는 왼쪽, 메뉴는 오른쪽에 배치하는 가장 기본적인 패턴입니다. display: flex; justify-content: space-between; align-items: center; 이 세 줄이면 완성됩니다.

패턴 2: 카드 그리드

반응형 카드 레이아웃입니다. 부모에 display: flex; flex-wrap: wrap; gap: 16px;, 자식에 flex: 1 1 300px;를 주면 화면 크기에 따라 자동으로 열 수가 조정됩니다.

패턴 3: 완벽한 가운데 정렬

CSS에서 가장 악명 높았던 '가운데 정렬'. Flexbox로는 단 3줄입니다: display: flex; justify-content: center; align-items: center;

Flexbox vs Grid, 언제 뭘 쓸까?

Flexbox는 1차원(한 줄) 레이아웃에 적합하고, Grid는 2차원(행+열) 레이아웃에 적합합니다. 실무에서는 대부분의 상황에서 Flexbox로 충분하며, 복잡한 대시보드나 갤러리 같은 경우에만 Grid가 필요합니다. 둘 다 알면 최고지만, 하나만 배운다면 Flexbox를 먼저 익히세요.