CSS HTML5/css
Flex CSS 완벽 가이드: Flexbox로 레이아웃 자유자재로 다루기
KKANG.Design
2025. 6. 16. 10:17
반응형
**Flexbox(Flexible Box Layout)**는 CSS3에서 도입된 강력한 레이아웃 모델로, 수평/수직 정렬, 간격 조절, 반응형 디자인 등을 보다 직관적으로 구현할 수 있게 도와줍니다. 이 글에서는 flex의 주요 속성과 예제를 한눈에 보기 쉽게 정리했습니다.
🔧 1. Flexbox의 기본 구조
html
복사편집
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
css
복사편집
.container { display: flex; }
- display: flex;를 선언하면 flex container가 생성되며, 하위 요소는 flex item이 됩니다.
📌 2. Flex Container 속성
2.1 flex-direction
요소의 주 축(main axis) 방향을 설정합니다.
css
복사편집
.container { flex-direction: row; /* 기본값 */ }
- row: 가로 정렬 (왼 → 오)
- row-reverse: 가로 정렬 (오 → 왼)
- column: 세로 정렬 (위 → 아래)
- column-reverse: 세로 정렬 (아래 → 위)
2.2 justify-content
주 축(main axis)에서의 정렬 방법을 설정합니다.
css
복사편집
.container { justify-content: center; }
- flex-start (기본값): 시작 지점부터 정렬
- center: 가운데 정렬
- flex-end: 끝 지점 정렬
- space-between: 양 끝 정렬 + 중간 균등 분배
- space-around: 모든 아이템 주위에 균등 간격
- space-evenly: 아이템 간 간격이 모두 동일
2.3 align-items
교차 축(cross axis) 방향의 정렬 설정입니다.
css
복사편집
.container { align-items: center; }
- stretch (기본값): 높이 자동 늘림
- flex-start: 위쪽 정렬
- center: 가운데 정렬
- flex-end: 아래쪽 정렬
- baseline: 텍스트 기준선 정렬
2.4 flex-wrap
아이템이 넘칠 경우 줄 바꿈 여부 설정
css
복사편집
.container { flex-wrap: wrap; }
- nowrap: 한 줄로 정렬 (기본값)
- wrap: 넘치면 다음 줄로 이동
- wrap-reverse: 반대로 줄 바꿈
2.5 align-content
여러 줄일 때 줄들의 전체 정렬 방식을 지정 (2줄 이상일 때만 적용)
css
복사편집
.container { align-content: space-between; }
- 사용 가능한 값은 justify-content와 거의 동일
🎯 3. Flex Item 속성
3.1 flex-grow
아이템이 남는 공간을 차지하는 비율
css
복사편집
.item { flex-grow: 1; }
- 값이 클수록 더 많은 공간을 가집니다.
3.2 flex-shrink
공간이 부족할 때 아이템이 줄어드는 비율
css
복사편집
.item { flex-shrink: 1; }
- 기본값은 1, 0으로 설정하면 줄어들지 않음
3.3 flex-basis
기본 크기 설정 (px, %, auto 가능)
css
복사편집
.item { flex-basis: 200px; }
3.4 flex
flex-grow, flex-shrink, flex-basis를 한 줄로 지정
css
복사편집
.item { flex: 1 1 200px; /* grow, shrink, basis */ }
또는 간단히 flex: 1;로도 사용 가능
3.5 align-self
특정 아이템 하나만 개별 정렬
css
복사편집
.item { align-self: center; }
- auto, flex-start, flex-end, center, baseline, stretch
📱 4. Flexbox의 활용 예제
4.1 수평 가운데 정렬
css
복사편집
.container { display: flex; justify-content: center; align-items: center; height: 100vh; }
4.2 네비게이션 바
css
복사편집
.navbar { display: flex; justify-content: space-between; align-items: center; }
🧠 5. Flexbox vs Grid
특징FlexboxGrid
| 주 사용 방향 | 1차원 (row 또는 column) | 2차원 (행 + 열) |
| 레이아웃 복잡도 | 중간 | 고급 레이아웃에 유리 |
| 정렬 | 매우 유연 | 명확한 위치 지정에 강점 |
🔍 결론: 언제 Flexbox를 써야 할까?
Flexbox는 아래와 같은 경우에 매우 유용합니다:
- 요소들을 가로/세로 정렬해야 할 때
- 간격을 균등하게 배분하고 싶을 때
- 반응형 UI에서 유연한 레이아웃이 필요할 때
- 네비게이션 바, 카드 레이아웃, 정렬 등 단순 레이아웃 구성 시
반응형