Flexbox가 세상을 바꿨다

진짜예요. Flexbox 나오기 전엔 요소 3개를 옆으로 나란히 배치하는 것만 해도 머리가 아팠어요. float 쓰고, clear 쓰고, position 조정하고…

저는 float으로 레이아웃 짜다가 컨테이너가 자꾸 무너져서 몇 시간 헤맸던 기억이 나요. Flexbox 배우고 나서 “이게 되네?” 하고 감탄했죠.

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 정렬 실수 → align-items와 justify-content 헷갈림. 축 개념 명확히 이해 후 해결했다
• gap 미사용 → margin으로 간격 조정하다가 마지막 요소에 불필요한 여백. gap 속성이 훨씬 깔끔하다
• flex-wrap 누락 → 화면 작아지면 요소가 삐져나감. flex-wrap: wrap 추가했다

이 경험을 통해 알게 된 점

• 80%는 Flexbox로 해결 가능. 네비게이션, 카드 배치, 버튼 그룹 등 대부분 커버된다
• Flexbox Froggy 같은 게임으로 연습하면 개념이 빠르게 잡힌다

다음 단계

다음 글에서는 Grid 레이아웃을 배운다. Grid는 행과 열을 동시에 제어해서 더 복잡한 레이아웃을 만들 수 있다.

실습 과제:

• Flexbox로 네비게이션 바 만들어보기
• 카드 3개를 균등하게 나란히 배치해보기
• 모바일에서 세로 배치, 데스크톱에서 가로 배치로 전환해보기

Flexbox와 Grid를 모두 자유자재로 쓸 수 있으면 레이아웃 고민은 끝이다. 개발자 도구로 display: flex 시각화 기능을 활용하자.

시리즈 네비게이션

• 이전글: CSS 독학 가이드 - 박스 모델과 레이아웃
• 현재글: CSS 독학 가이드 - Flexbox 완벽 가이드
• 다음글: CSS 독학 가이드 - Grid 레이아웃

← 블로그 목록으로