Flex CSS 완벽 가이드: Flexbox로 레이아웃 자유자재로 다루기

**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에서 유연한 레이아웃이 필요할 때
• 네비게이션 바, 카드 레이아웃, 정렬 등 단순 레이아웃 구성 시