CSS Flexbox 완전 가이드: 기초부터 고급 패턴까지

CSS Flexbox는 현대 웹 개발의 필수 레이아웃 시스템입니다. 이 완전한 CSS Flexbox 가이드는 기초부터 고급 패턴까지 모든 것을 다룹니다.

1. Flexbox란 무엇이며 언제 사용하나

Flexbox는 공간 배분과 요소 정렬을 위한 1차원 레이아웃 모델입니다.

/* Use Flexbox when you need: */

/* 1. One-dimensional alignment (row OR column) */
.toolbar { display: flex; gap: 8px; }

/* 2. Content-driven sizing */
.tabs { display: flex; }
.tab { flex: 1; }  /* equal-width tabs */

/* 3. Dynamic ordering */
.card { display: flex; flex-direction: column; }
.card-footer { order: 3; margin-top: auto; }

/* Use CSS Grid instead when you need: */
/* - Two-dimensional control (rows AND columns) */
/* - Layout-driven sizing (template areas) */
/* - Complex page-level layouts */

2. Flex 컨테이너: 부모 요소

display: flex로 직접 자식을 플렉스 아이템으로 만듭니다.

/* Block-level flex container */
.container {
  display: flex;
}

/* Inline-level flex container */
.inline-container {
  display: inline-flex;
}

/* flex-direction: controls the main axis direction */
.row      { flex-direction: row; }          /* left to right (default) */
.row-rev  { flex-direction: row-reverse; }  /* right to left */
.col      { flex-direction: column; }       /* top to bottom */
.col-rev  { flex-direction: column-reverse; } /* bottom to top */

/* flex-flow: shorthand for direction + wrap */
.container {
  flex-flow: row wrap;
  /* same as: flex-direction: row; flex-wrap: wrap; */
}

3. 주축 vs 교차축

두 축을 이해하는 것이 Flexbox 마스터의 핵심입니다.

/*
 * flex-direction: row (default)
 * ┌──────────────────────────────────────────┐
 * │ ← ← ← ← ← ← MAIN AXIS → → → → → → →  │
 * │                                          │
 * │  ↑   ┌────┐  ┌────┐  ┌────┐             │
 * │  │   │ 1  │  │ 2  │  │ 3  │   CROSS     │
 * │  │   └────┘  └────┘  └────┘   AXIS      │
 * │  ↓                                       │
 * └──────────────────────────────────────────┘
 *
 * flex-direction: column
 * ┌──────────────────┐
 * │ ←CROSS AXIS→     │
 * │                  │
 * │  ↑  ┌────────┐   │
 * │  │  │   1    │   │
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │  MAIN
 * │  │  │   2    │   │  AXIS
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │
 * │  ↓  │   3    │   │
 * │     └────────┘   │
 * └──────────────────┘
 *
 * KEY INSIGHT:
 * - justify-content = main axis
 * - align-items     = cross axis
 * - When flex-direction changes, the axes swap!
 */

4. justify-content: 주축 정렬

justify-content는 주축을 따른 배분을 제어합니다.

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* [1][2][3]                    */

  /* Center items */
  justify-content: center;
  /*         [1][2][3]            */

  /* Pack items to the end */
  justify-content: flex-end;
  /*                    [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* [1]        [2]        [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /*   [1]     [2]     [3]      */

  /* Equal space everywhere */
  justify-content: space-evenly;
  /*    [1]    [2]    [3]       */
}

5. align-items: 교차축 정렬

align-items는 교차축의 위치를 제어합니다.

.container {
  display: flex;
  height: 200px;

  align-items: stretch;     /* Items fill container height (default) */
  align-items: flex-start;  /* Items at the top */
  align-items: center;      /* Items vertically centered */
  align-items: flex-end;    /* Items at the bottom */
  align-items: baseline;    /* Items aligned by text baseline */
}

/* Override for a single item */
.special-item {
  align-self: center;  /* This item centered, others follow container */
}

/* align-content: controls spacing between LINES (only with wrap) */
.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* lines packed to top */
  align-content: center;        /* lines centered */
  align-content: space-between; /* equal space between lines */
}

6. Flex 아이템 속성: grow, shrink, basis

세 가지 속성이 아이템의 가용 공간 공유 방법을 제어합니다.

/* flex-grow: how much an item GROWS when extra space exists */
.item { flex-grow: 0; }  /* default: don't grow */
.item { flex-grow: 1; }  /* grow to fill available space */
.item { flex-grow: 2; }  /* grow twice as much as flex-grow: 1 items */

/* flex-shrink: how much an item SHRINKS when space is tight */
.item { flex-shrink: 1; }  /* default: shrink proportionally */
.item { flex-shrink: 0; }  /* never shrink (fixed size) */

/* flex-basis: the STARTING SIZE before grow/shrink */
.item { flex-basis: auto; }   /* use content width (default) */
.item { flex-basis: 0; }      /* start from zero, grow equally */
.item { flex-basis: 200px; }  /* start from 200px */
.item { flex-basis: 25%; }    /* start from 25% of container */

/* flex shorthand (recommended) */
.item { flex: 1; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
/* Items grow equally from zero — equal widths */

.item { flex: auto; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: auto */
/* Items grow from content size — proportional widths */

.item { flex: none; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: auto */
/* Items are inflexible — use content width only */

.item { flex: 0 0 200px; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
/* Fixed 200px item that never grows or shrinks */

7. Flex Wrap과 다중 행 레이아웃

flex-wrap으로 아이템을 다음 줄로 넘길 수 있습니다.

.container {
  display: flex;

  flex-wrap: nowrap;        /* default — single line, may overflow */
  flex-wrap: wrap;          /* wrap to next line when needed */
  flex-wrap: wrap-reverse;  /* wrap in reverse order */
}

/* Practical example: responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min-width 300px */
  max-width: 400px;  /* cap maximum width */
}
/* Result:
 * Wide screen:  [card] [card] [card] [card]
 * Medium:       [card] [card] [card]
 *               [card]
 * Narrow:       [card]
 *               [card]
 *               [card]
 *               [card]
 */

8. gap 속성

gap은 외부 여백 없이 아이템 사이에 공간을 추가합니다.

.container {
  display: flex;
  flex-wrap: wrap;

  gap: 16px;              /* equal gap in both directions */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */
  row-gap: 20px;          /* vertical spacing only */
  column-gap: 12px;       /* horizontal spacing only */
}

/* Why gap is better than margins: */

/* Old approach (margins) - awkward edge spacing */
.item { margin: 8px; }
/* Creates 8px margin on ALL sides, including outer edges */
/* Need negative margins on container to compensate */

/* Modern approach (gap) - clean spacing */
.container { display: flex; gap: 16px; }
/* Space ONLY between items, not on outer edges */

9. 일반적인 Flexbox 레이아웃 패턴

실제 프로젝트에서 가장 많이 사용되는 Flexbox 패턴.

Perfect Centering

/* Center anything horizontally and vertically */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* or any fixed height */
}

/* Alternative: margin auto trick */
.parent { display: flex; height: 100vh; }
.child  { margin: auto; }  /* centers in both axes */

Navigation Bar

/* Logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* Logo left, links center, actions right */
.navbar-3-section {
  display: flex;
  align-items: center;
}
.navbar-3-section .logo    { flex: 1; }
.navbar-3-section .links   { flex: 0; display: flex; gap: 24px; }
.navbar-3-section .actions { flex: 1; display: flex; justify-content: flex-end; }

Sticky Footer

/* Footer stays at bottom even with short content */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header { flex-shrink: 0; }   /* fixed height */
main   { flex: 1; }          /* fills all remaining space */
footer { flex-shrink: 0; }   /* fixed height, stays at bottom */

Sidebar Layout

/* Fixed sidebar + fluid main content */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 280px;  /* fixed 280px, never grow or shrink */
}

.main-content {
  flex: 1;          /* takes remaining space */
  min-width: 0;     /* prevents overflow */
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { flex-basis: auto; }
}

Equal-Height Cards

/* Cards in a row, all same height, button at bottom */
.card-row {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;  /* fills remaining space, pushing footer down */
}

.card-footer {
  margin-top: auto;  /* always at the bottom */
}

10. Flexbox vs CSS Grid

Flexbox와 CSS Grid는 보완적인 도구입니다.

/* Use BOTH together for best results: */

/* Grid for page layout */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

/* Flexbox for components inside grid areas */
.header {
  grid-area: header;
  display: flex;              /* Flexbox inside Grid */
  justify-content: space-between;
  align-items: center;
}

자주 묻는 질문

Flexbox로 div를 중앙 정렬하려면?

display: flex; justify-content: center; align-items: center; height: 100vh.

flex: 1과 flex: auto의 차이?

flex: 1은 0에서 성장, flex: auto는 콘텐츠 크기에서 성장.

왜 플렉스 아이템이 넘치나요?

min-width: 0을 추가하세요.

Flexbox로 전체 페이지 레이아웃?

네, flex-direction: column과 min-height: 100vh로 가능합니다.

Flexbox 브라우저 지원?

전 세계 99% 이상 지원.

Flexbox는 모든 프론트엔드 개발자에게 필수 스킬입니다.