4. 🧭 Flexbox 완전 이해하기 — 가로·세로 정렬 스트레스 탈출

---

예전엔 박스를 가로 정렬하려면 float, inline-block, position 등을 조합해야 했다.
하지만 이제는 단 한 줄로 가능하다 👇

display: flex; 

이번 글에서는 Flexbox(플렉스박스) 의 핵심 개념부터
정렬, 배치, 간격, 비율 조절까지 실무 중심 예제로 완벽 정리한다.

---

💡 1. Flexbox란?

“Flexbox는 요소를 가로·세로로 유연하게 정렬하기 위한 CSS 레이아웃 시스템이다.”

기존 레이아웃 문제들:

• 가운데 정렬이 복잡함
• 요소 크기가 제각각일 때 간격이 어긋남
• 반응형 레이아웃 구성 어려움

💬 Flexbox는 이런 문제를 한 번에 해결한다.

---

🧱 2. 기본 구조

Flexbox는 부모(container) 와 자식(item) 구조로 동작한다.

<div class="container"> 
  <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
</div> 

.container { 
  display: flex; /* 부모에 flex 선언 */ 
} 

✅ 이제 .item들은 자동으로 가로 방향(row) 으로 배치된다.

---

🧩 3. flex-direction — 배치 방향 설정

.container { 
  display: flex; 
  flex-direction: row; /* 기본값 */ 
} 

값 설명 예시

row	가로 정렬 (왼→오)	메뉴, 리스트
row-reverse	가로 정렬 (오→왼)	RTL 언어용
column	세로 정렬 (위→아래)	폼 입력, 리스트
column-reverse	세로 정렬 (아래→위)	채팅 UI 등

💡 flex-direction이 방향을 정하면,
이제 나머지 속성들은 그 방향을 기준으로 작동한다.

---

⚙️ 4. justify-content — 메인축(main axis) 정렬

“요소들이 가로로 어떻게 정렬될지를 결정한다.”

.container { 
  justify-content: center; 
} 

값 설명 결과

flex-start	왼쪽 정렬 (기본값)	◼︎◼︎◼︎
center	가운데 정렬	◼︎◼︎◼︎
flex-end	오른쪽 정렬	◼︎◼︎◼︎
space-between	양끝 고정 + 나머지 간격 동일	◼︎   ◼︎   ◼︎
space-around	양쪽 여백 균등	◼︎   ◼︎   ◼︎
space-evenly	모든 간격 동일	◼︎   ◼︎   ◼︎

💬 가장 자주 쓰이는 조합은 justify-content: center;
→ 가운데 정렬의 전설적인 해결사.

---

🎯 5. align-items — 교차축(cross axis) 정렬

“요소들이 세로로 어떻게 정렬될지를 결정한다.”

.container { 
  align-items: center; 
} 

값 설명

flex-start	위쪽 정렬
center	세로 가운데 정렬
flex-end	아래쪽 정렬
stretch	부모 높이에 맞게 자동 확장 (기본값)
baseline	텍스트 기준선에 맞춤

💡 세로 가운데 정렬을 위해 더 이상 position + transform을 쓸 필요 없다.

---

🧮 6. flex-wrap — 자동 줄바꿈

Flexbox는 기본적으로 한 줄(row) 로 모든 아이템을 배치한다.
하지만 공간이 부족할 때 자동으로 줄바꿈하게 만들 수 있다.

.container { 
  flex-wrap: wrap; 
} 

값 설명

nowrap	한 줄에 강제 배치 (기본값)
wrap	다음 줄로 넘어감
wrap-reverse	다음 줄이 위로 쌓임

💡 반응형 카드 레이아웃에서 매우 자주 사용된다.

---

🧩 7. align-content — 여러 줄 정렬 (wrap 사용 시)

줄이 여러 개일 때 각 줄 간의 세로 간격을 조절한다.

.container { 
  flex-wrap: wrap; 
  align-content: space-between; 
} 

값 설명

flex-start	위로 몰림
center	전체 가운데 정렬
flex-end	아래로 몰림
space-between	줄 간격 균등
space-around	위아래 여백 균등

💡 align-items와 비슷하지만,
align-content는 “여러 줄”이 있을 때만 적용된다.

---

⚙️ 8. 개별 아이템 제어 — align-self

특정 아이템만 개별적으로 세로 정렬을 다르게 하고 싶을 때 사용한다.

.item:nth-child(2) { 
  align-self: flex-end; 
} 

💬 align-items는 부모 기준,
align-self는 자식 개별 기준이다.

---

🧮 9. flex-grow, flex-shrink, flex-basis — 비율 조정 3형제

“화면 크기에 따라 아이템 비율을 조절하는 핵심 속성”

.item { 
  flex-grow: 1; 
} 

속성 역할 예시

flex-grow	남은 공간을 나누는 비율	flex-grow: 1 = 동일 분배
flex-shrink	줄어드는 비율	flex-shrink: 0 = 줄어들지 않음
flex-basis	기본 크기 (width 대체)	flex-basis: 200px;

💡 자주 쓰는 단축형 👇

.item { 
  flex: 1; /* grow=1, shrink=1, basis=0 */ 
} 

---

🎨 10. 실무 예제 — 카드형 레이아웃 만들기

<div class="card-container"> 
  <div class="card">A</div> 
  <div class="card">B</div> 
  <div class="card">C</div> 
</div> 

.card-container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 20px; 
} 
 
.card { 
  flex: 1; 
  background: white; 
  border: 1px solid #ddd; 
  padding: 30px; 
  text-align: center; 
  border-radius: 10px; 
} 

✅ 결과:

• 3개의 카드가 균등한 폭으로 정렬
• 자동 간격 유지
• 반응형 대응 완벽

---

🧠 11. flex-direction + justify-content 조합 예시

조합 설명 대표 UI

row + space-between	가로 메뉴	네비게이션
column + center	세로 중앙 정렬	로그인 폼
row + center	가로 중앙 정렬	버튼 그룹
row + flex-end	오른쪽 배치	툴바 버튼
column + space-around	세로 카드 그룹	사이드 메뉴

---

⚡ 12. 반응형 정렬 핵심 팁

💡 Flexbox는 width 없이도 반응형이 된다.

.container { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 16px; 
} 
 
.item { 
  flex: 1 1 200px; /* grow=1, shrink=1, 최소200px */ 
} 

✅ 화면 크기에 따라 자동으로 카드 개수가 조정된다.
✅ gap 속성으로 margin 없이 깔끔한 간격 유지.

---

🏁 13. 마무리 — “Flexbox를 이해하면 정렬이 쉬워진다”

Flexbox는 “가로 정렬의 신세계”일 뿐 아니라,
세로 중앙 정렬, 비율 조절, 반응형까지 전부 해결해준다.

💬 “float과 position으로 고생하던 시절은 끝났다.”

다음 편에서는
✅ 5. CSS Grid로 레이아웃 설계하기 — 2차원 배치의 끝판왕
을 통해 Flexbox보다 한 단계 위의 레이아웃 시스템을 배워보자.

---