CSS Flexbox 치트시트 (정렬 총정리)
justify-content, align-items, flex-direction 등 CSS 플렉스박스 속성을 그림 없이도 이해되도록 용도별로 정리한 치트시트입니다.
Flexbox는 한 방향(가로 또는 세로) 으로 요소를 배치·정렬하는 레이아웃입니다. 컨테이너에 display: flex를 주면 시작합니다.
컨테이너 속성
| 속성 | 값 | 효과 |
|---|---|---|
flex-direction | row / column | 주축 방향(가로/세로) |
justify-content | flex-start center space-between space-around | 주축 정렬 |
align-items | flex-start center stretch baseline | 교차축 정렬 |
flex-wrap | nowrap / wrap | 줄바꿈 허용 |
gap | 12px 등 | 아이템 간 간격 |
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
<span>A</span><span>B</span><span>C</span>
</div>
가운데 정렬 (가장 많이 찾는 패턴)
<div style="display:flex; justify-content:center; align-items:center; height:120px; border:1px solid #ccc;">
<span>완벽한 가운데</span>
</div>
아이템 속성
| 속성 | 효과 |
|---|---|
flex: 1 | 남는 공간을 비율대로 차지 |
flex-grow | 늘어나는 비율 |
flex-shrink | 줄어드는 비율 |
flex-basis | 기본 크기 |
align-self | 이 아이템만 교차축 정렬 다르게 |
핵심:
justify-content는 주축,align-items는 교차축.flex-direction을 바꾸면 두 축의 방향도 바뀝니다. 2차원(행+열 동시) 배치는 CSS Grid가 더 적합합니다.