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보다 한 단계 위의 레이아웃 시스템을 배워보자.