CSS Flexbox 치트시트: 속성과 값
Flexbox는 아이템을 한 방향(행 또는 열)으로 배치하고 그 사이 공간을 분배합니다. 속성은 두 그룹으로 나뉩니다: 컨테이너(flex 부모)에 설정하는 것과 아이템(자식)에 설정하는 것.
멘탈 모델: flex-direction이 주축을 정하고, justify-content가 그 축을 따라 정렬하며, align-items가 수직인 교차축을 따라 정렬합니다.
업데이트 2026-07-06
컨테이너 속성(flex 부모)
| 속성 | 값 | 하는 일 |
|---|---|---|
| display | flex | inline-flex | 요소를 flex 컨테이너로 전환 |
| flex-direction | row | row-reverse | column | column-reverse | 주축 방향 |
| flex-wrap | nowrap | wrap | wrap-reverse | 아이템이 새 줄로 넘어갈지 여부 |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | 주축을 따른 정렬 |
| align-items | stretch | flex-start | center | flex-end | baseline | 교차축을 따른 정렬 |
| align-content | flex-start | center | space-between | stretch | 줄바꿈된 여러 줄 정렬 |
| gap | <length> (e.g. 16px) | 아이템 사이 간격 |
아이템 속성(자식)
| 속성 | 값 | 하는 일 |
|---|---|---|
| flex-grow | 0 | <number> | 아이템이 공간을 채우며 커지는 정도 |
| flex-shrink | 1 | <number> | 공간이 부족할 때 줄어드는 정도 |
| flex-basis | auto | <length> | grow/shrink 전 아이템의 시작 크기 |
| flex | e.g. 1 1 0 | 1 | auto | grow·shrink·basis의 단축 속성 |
| align-self | auto | center | flex-start | flex-end | stretch | 한 아이템만 align-items 재정의 |
| order | 0 | <integer> | 아이템을 시각적으로 재배치(작을수록 앞) |
가장 흔한 가운데 정렬 요령: 컨테이너에 display: flex; justify-content: center; align-items: center;를 주면 자식을 가로·세로 모두 가운데로. 이 값들에 쓰는 크기 단위는 CSS 단위 레퍼런스를 보세요.