CSS 독학 가이드 3 - Flexbox 완벽 가이드
Flexbox가 세상을 바꿨다
진짜예요. Flexbox 나오기 전엔 요소 3개를 옆으로 나란히 배치하는 것만 해도 머리가 아팠어요. float 쓰고, clear 쓰고, position 조정하고…
Flexbox는 2017년쯤 모든 브라우저에서 지원되기 시작했고, 지금은 레이아웃의 표준이 됐습니다. 한번 익숙해지면 “와, 이거 없이 어떻게 살았지?” 싶을 거예요.
Flexbox 기본 개념
Flexbox는 **부모 요소(container)**와 **자식 요소(items)**로 구성돼요.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
display: flex; /* 이게 핵심! */
}실행 결과:
display: flex만 써주면 자식 요소들이 자동으로 옆으로 배치됩니다!
주축(Main Axis)과 교차축(Cross Axis)
Flexbox는 두 개의 축이 있어요:
- 주축 (Main Axis): 아이템이 배치되는 방향 (기본: 가로)
- 교차축 (Cross Axis): 주축에 수직인 방향 (기본: 세로)
(교차축)
주축 방향은 flex-direction으로 바꿀 수 있어요.
Container 속성들
부모 요소(.container)에 쓰는 속성들이에요.
1. flex-direction (배치 방향)
.container {
display: flex;
flex-direction: row; /* 기본값: 가로 배치 → */
}옵션:
row(기본): 왼쪽에서 오른쪽으로row-reverse: 오른쪽에서 왼쪽으로column: 위에서 아래로 (세로 배치)column-reverse: 아래에서 위로
.container {
display: flex;
flex-direction: column; /* 세로 배치 */
}이제 아이템들이 위아래로 쌓입니다!
2. justify-content (주축 정렬)
아이템들을 주축 방향으로 어떻게 배치할지 정해요.
.container {
display: flex;
justify-content: center; /* 중앙 정렬 */
}실행 결과 (justify-content 옵션 비교):
실행 결과:
옵션:
flex-start(기본): 왼쪽 정렬flex-end: 오른쪽 정렬center: 중앙 정렬space-between: 양끝 배치, 사이 균등 분배space-around: 좌우 여백 포함, 균등 분배space-evenly: 모든 간격 동일하게 분배
/* 카드를 양끝에 배치하고 사이 간격 균등 */
.container {
display: flex;
justify-content: space-between;
}3. align-items (교차축 정렬)
아이템들을 교차축 방향으로 정렬해요.
.container {
display: flex;
align-items: center; /* 세로 중앙 정렬 */
height: 200px; /* 높이가 있어야 효과가 보임 */
}옵션:
stretch(기본): 컨테이너 높이에 맞춰 늘어남flex-start: 위쪽 정렬flex-end: 아래쪽 정렬center: 중앙 정렬baseline: 텍스트 기준선에 맞춤
4. flex-wrap (줄바꿈)
아이템이 컨테이너보다 크면 어떻게 할지 정해요.
.container {
display: flex;
flex-wrap: nowrap; /* 기본값: 줄바꿈 안 함 */
}옵션:
nowrap(기본): 한 줄에 다 우겨넣음wrap: 공간 부족하면 다음 줄로 넘어감wrap-reverse: 역순으로 줄바꿈
/* 반응형 카드 그리드 */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 300px; /* 최소 300px, 늘어날 수 있음 */
}5. gap (간격)
아이템 사이 간격을 쉽게 지정해요. (margin 대신!)
.container {
display: flex;
gap: 20px; /* 아이템 사이 20px 간격 */
}.container {
display: flex;
row-gap: 30px; /* 세로 간격 */
column-gap: 20px; /* 가로 간격 */
}
Item 속성들
자식 요소(.item)에 쓰는 속성들이에요.
1. flex-grow (늘어나기)
남은 공간을 얼마나 차지할지 비율로 정해요.
.item1 {
flex-grow: 1; /* 1의 비율로 늘어남 */
}
.item2 {
flex-grow: 2; /* 2의 비율로 늘어남 (item1의 2배) */
}
.item3 {
flex-grow: 1;
}item2가 나머지보다 2배 넓어집니다!
2. flex-shrink (줄어들기)
공간이 부족할 때 얼마나 줄어들지 정해요.
.item {
flex-shrink: 1; /* 기본값: 같은 비율로 줄어듦 */
}
.item-no-shrink {
flex-shrink: 0; /* 절대 줄어들지 않음 */
}3. flex-basis (기본 크기)
아이템의 기본 크기를 정해요. (width 대신)
.item {
flex-basis: 200px; /* 기본 200px */
}4. flex (축약형) ⭐ 가장 많이 씀
flex-grow, flex-shrink, flex-basis를 한 번에 지정해요.
.item {
flex: 1 1 200px;
/* grow shrink basis */
}자주 쓰는 패턴:
/* 균등하게 늘어남 */
.item {
flex: 1; /* flex: 1 1 0 */
}
/* 고정 크기, 안 늘어남 */
.item {
flex: 0 0 200px;
}
/* 최소 크기, 늘어날 수 있음 */
.item {
flex: 1 1 300px;
}5. order (순서 변경)
HTML 순서와 상관없이 시각적 순서를 바꿔요.
.item1 { order: 3; }
.item2 { order: 1; } /* 제일 먼저 */
.item3 { order: 2; }모바일에서 순서 바꾸기에 엄청 유용해요!
6. align-self (개별 정렬)
특정 아이템만 다르게 정렬해요.
.container {
display: flex;
align-items: flex-start;
}
.item-special {
align-self: center; /* 이 아이템만 중앙 정렬 */
}실전 예제 1: 네비게이션 바
<nav class="navbar">
<div class="logo">MyLogo</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.menu {
display: flex;
gap: 2rem;
list-style: none;
}
.menu a {
color: white;
text-decoration: none;
}로고는 왼쪽, 메뉴는 오른쪽에 딱 붙습니다!
실전 예제 2: 카드 그리드
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
</div>.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px); /* 3열 그리드 */
min-width: 250px;
padding: 2rem;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
}
@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* 모바일에서 1열 */
}
}화면 크기에 따라 자동으로 줄 바뀌는 반응형 그리드!
실전 예제 3: 완벽한 중앙 정렬
<div class="center-container">
<div class="content">
<h1>Hello</h1>
<p>완벽한 중앙 정렬!</p>
</div>
</div>.center-container {
display: flex;
justify-content: center; /* 가로 중앙 */
align-items: center; /* 세로 중앙 */
height: 100vh; /* 화면 전체 높이 */
}실행 결과:
완벽한 중앙!
가로 세로 모두 중앙 정렬
가로, 세로 모두 완벽하게 중앙 정렬! 예전엔 이거 하나 하려고 온갖 트릭을 썼는데…
실전 예제 4: Holy Grail Layout (성배 레이아웃)
헤더, 사이드바, 메인, 푸터로 구성된 전형적인 레이아웃이에요.
<div class="app">
<header>Header</header>
<div class="content">
<aside>Sidebar</aside>
<main>Main Content</main>
</div>
<footer>Footer</footer>
</div>.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
background: #333;
color: white;
padding: 1rem;
}
.content {
display: flex;
flex: 1; /* 남은 공간 모두 차지 */
}
aside {
flex: 0 0 200px; /* 고정 200px */
background: #f0f0f0;
padding: 1rem;
}
main {
flex: 1; /* 남은 공간 모두 차지 */
padding: 2rem;
}푸터가 항상 화면 맨 아래에 붙어요!
Flexbox 디버깅 팁
1. 배경색 입히기
.container {
background: lightblue;
}
.item {
background: lightcoral;
border: 1px solid black;
}어디까지 공간을 차지하는지 한눈에 보여요.
2. 개발자 도구 활용
F12 누르고 flex 컨테이너 선택하면 flex 아이콘이 보여요. 클릭하면 주축, 교차축이 화면에 표시됩니다!
3. min-width: 0 트릭
flex 아이템이 줄어들지 않을 때:
.item {
min-width: 0; /* 강제로 줄어들게 */
}텍스트가 overflow 될 때 자주 쓰는 트릭이에요.
Flexbox vs Grid, 언제 뭘 쓸까?
- Flexbox: 1차원 레이아웃 (한 줄 또는 한 열)
- 네비게이션 바, 버튼 그룹, 카드 나열
- Grid: 2차원 레이아웃 (행과 열 동시)
- 사진 갤러리, 복잡한 페이지 레이아웃
실무에서는 둘 다 섞어 씁니다. Flexbox가 더 직관적이고 간단해서 먼저 시도해보고, 안 되면 Grid 쓰는 식이에요.
다음 단계
Flexbox를 마스터했으니 이제 Grid 레이아웃을 배울 차례예요. Grid는 행과 열을 동시에 제어해서 더 복잡한 레이아웃을 만들 수 있습니다.
다음 글에서는 Grid의 기본부터 실전 예제까지 다룰 거예요. Flexbox와 Grid를 모두 자유자재로 쓸 수 있으면 레이아웃 고민은 끝!
실습 과제:
- Flexbox로 네비게이션 바 만들어보기
- 카드 3개를 균등하게 나란히 배치해보기
- 모바일에서 세로 배치, 데스크톱에서 가로 배치로 전환해보기
Flexbox 연습 게임 추천: Flexbox Froggy 검색해보세요. 개구리를 정렬하면서 Flexbox를 배울 수 있어요!
시리즈 네비게이션
- 이전글: CSS 독학 가이드 - 박스 모델과 레이아웃
- 현재글: CSS 독학 가이드 - Flexbox 완벽 가이드
- 다음글: CSS 독학 가이드 - Grid 레이아웃