🔍 Flexbox란?
- Flexible Box Layout의 의미로, 요소들을 일렬로 정렬하고 배치하는 방법
- 주로 메뉴, 그리드, 반응형 레이아웃 등에 자주 사용
✅ 컨테이너 주요 속성
| 속성 | 값 예시 | 설명 |
|---|
display | flex / inline-flex | Flexbox를 활성화함 |
flex-direction | row / column / row-reverse / column-reverse | 주축 방향 설정 |
flex-wrap | nowrap / wrap / wrap-reverse | 줄바꿈 여부 설정 |
justify-content | flex-start / center / flex-end / space-between / space-around / space-evenly | 주축(main axis) 정렬 |
align-items | stretch / flex-start / center / flex-end / baseline | 교차축(cross axis) 정렬 |
align-content | stretch / flex-start / center / flex-end / space-between / space-around | 다줄 정렬 (줄이 여러 줄일 때 사용) |
gap | gap: 1rem 등 | 아이템 간 간격 |
✅ 아이템 주요 속성
| 속성 | 값 예시 | 설명 |
|---|
flex-grow | 0 / 1 / ... | 남는 공간을 얼마나 채울지 |
flex-shrink | 0 / 1 / ... | 공간 부족할 때 얼마나 줄어들지 |
flex-basis | auto / 200px 등 | 기본 크기 지정 |
flex | 1 (1 1 0%) / auto / none | 위 세 속성의 shorthand |
align-self | auto / flex-start / center / flex-end / stretch | 개별 아이템 정렬 방식 |
order | 숫자 (예: 0, 1, -1) | 아이템 순서 재정렬(기본값은 0) |
✅ Tailwind CSS에서 활용 비교
| 목적 | 기본 CSS | Tailwind CSS |
|---|
| Flex 컨테이너 선언 | display: flex; | flex |
| 수평 가운데 정렬 | justify-content: center; | justify-center |
| 수직 가운데 정렬 | align-items: center; | items-center |
| 요소 사이 여백 분산 | justify-content: space-between; | justify-between |
| 요소를 아래로 정렬 | align-items: flex-end; | items-end |
| 열 방향 배치 | flex-direction: column; | flex-col |
| 줄바꿈 허용 | flex-wrap: wrap; | flex-wrap |
| 요소 반대 방향 배치 | flex-direction: row-reverse; | flex-row-reverse |
| 개별 아이템 정렬 | align-self: flex-start; | self-start |
| 요소가 남은 공간 채우기 | flex-grow: 1; | grow |
| 요소가 줄어들 수 있게 | flex-shrink: 1; | shrink |
| 기본 크기 설정 | flex-basis: 200px; | basis-[200px] 또는 커스텀 |
💻 예제: 간단한 메뉴 구현
https://codepen.io/joyewon0705/pen/dPodOQG?editors=1010
💡 TIPS
