CSS Flexbox 레이아웃 요약표 (Cheat Sheet)
이 페이지는 컨테이너 속성, 아이템 속성 및 일반적인 레이아웃 사례를 포함한 CSS Flexbox 레이아웃의 시각적 요약표(Cheat Sheet)를 제공합니다.
컨테이너 속성 (Container Properties)
| 속성 | 값 | 설명 |
|---|---|---|
display |
flex |
탄력적 레이아웃 활성화 |
flex-direction |
row |
주축이 가로 방향, 시작점은 왼쪽 |
row-reverse |
주축이 가로 방향, 시작점은 오른쪽 | |
column |
주축이 세로 방향, 시작점은 위쪽 | |
column-reverse |
주축이 세로 방향, 시작점은 아래쪽 | |
flex-wrap |
nowrap |
기본값, 항목들을 한 줄에 배치 |
wrap |
항목들을 여러 줄로 줄바꿈 | |
wrap-reverse |
항목들을 여러 줄로 역순 줄바꿈 | |
justify-content |
flex-start |
주축 정렬 방식: 왼쪽 정렬 |
flex-end |
주축 정렬 방식: 오른쪽 정렬 | |
center |
주축 정렬 방식: 가운데 정렬 | |
space-between |
주축 정렬 방식: 양끝 정렬, 항목 사이 간격 일정 | |
space-around |
주축 정렬 방식: 항목 양쪽 간격 일정 | |
align-items |
flex-start |
교차축 정렬 방식: 상단 정렬 |
flex-end |
교차축 정렬 방식: 하단 정렬 | |
center |
교차축 정렬 방식: 가운데 정렬 | |
baseline |
교차축 정렬 방식: 텍스트 기선 기준 정렬 | |
stretch |
기본값, 교차축 정렬 방식: 컨테이너를 가득 채우도록 늘림 | |
align-content |
flex-start |
여러 줄일 때 교차축 정렬: 상단 정렬 |
flex-end |
여러 줄일 때 교차축 정렬: 하단 정렬 | |
center |
여러 줄일 때 교차축 정렬: 가운데 정렬 | |
space-between |
여러 줄일 때 교차축 정렬: 양끝 정렬, 줄 사이 간격 일정 | |
space-around |
여러 줄일 때 교차축 정렬: 줄 양쪽 간격 일정 | |
stretch |
기본값, 여러 줄일 때 교차축 정렬: 남은 공간을 채우도록 늘림 |
아이템 속성 (Item Properties)
| 속성 | 값 | 설명 |
|---|---|---|
flex-grow |
숫자 |
항목의 확대 비율 정의, 기본값은 0 (확대되지 않음) |
flex-shrink |
숫자 |
항목의 축소 비율 정의, 기본값은 1 (공간 부족 시 축소됨) |
flex-basis |
auto |
여유 공간 배분 전 항목이 차지하는 주축 공간 크기 |
align-self |
auto |
개별 항목에 대해 다른 정렬 방식 적용 (align-items 재정의) |
flex-start |
해당 항목을 컨테이너 시작 위치에 배치 | |
flex-end |
해당 항목을 컨테이너 끝 위치에 배치 | |
center |
해당 항목을 컨테이너 중간에 배치 | |
baseline |
해당 항목의 기선을 컨테이너 기선에 맞춤 | |
stretch |
해당 항목을 컨테이너에 가득 차도록 늘림 (높이가 있는 경우) |
일반적인 레이아웃 사례
| 레이아웃 | 컨테이너 속성 | 아이템 속성 |
|---|---|---|
| 가로 내비게이션 바 | display: flex;justify-content: space-around; |
|
| 세로 사이드바 | display: flex;flex-direction: column;justify-content: flex-start; |
|
| 그리드 레이아웃 | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| 카드 레이아웃 | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |