Flexbox란 무엇이며, 그것으로 콘텐츠를 어떻게 가운데 정렬하나요?

Question

IT Interview Practice · Accepted Answer

**Flexbox**는 1차원 레이아웃 시스템입니다 — 아이템을 단일 **행** 또는 **열**로 배치하고 그 선을 따라 공간을 분배합니다. 예전에 float와 편법이 필요했던 정렬과 spacing 문제에 대한 최신 해답입니다.

```css
.container {
  display: flex;              /* flex 켜기; 자식이 flex item이 됨 */
  flex-direction: row;       /* main axis: row(기본) 또는 column */
  gap: 1rem;                 /* 아이템 사이 간격 (margin 편법 불필요) */
}
```

## 두 개의 축

Flexbox에는 **main axis**(아이템이 흐르는 방향)와 **cross axis**(수직)가 있습니다. 속성이 이에 매핑됩니다.

```css
.container {
  justify-content: center; /* main axis를 따라 정렬 */
  align-items: center;     /* cross axis를 따라 정렬 */
}
```

## 완벽한 가운데 정렬 — 유명한 사용 사례

```css
.center {
  display: flex;
  justify-content: center; /* 수평 (main axis = row) */
  align-items: center;     /* 수직 (cross axis) */
  min-height: 100vh;
}
```

이 세 줄이 자식을 수평과 수직 모두 가운데 정렬합니다 — Flexbox 이전에는 악명 높게 어려웠던 작업입니다.

## 흔한 패턴

```css
/* 아이템을 양 끝으로 밀기: 로고 왼쪽, 메뉴 오른쪽 */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* 아이템이 안 맞으면 새 줄로 줄바꿈 */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` 옵션에는 `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`가 있습니다.

## 왜 중요한가

Flexbox는 navbar, 버튼 그룹, 카드 행, 가운데 정렬, 그리고 모든 "아이템 한 줄" 레이아웃을 위한 일상 도구입니다.

main/cross axis 모델(그리고 `flex-direction`을 바꾸면 `justify-content`/`align-items`의 의미가 바뀐다는 점)을 이해하는 것이 핵심 멘탈 모델입니다.

1D 레이아웃에는 Flexbox를, 2D에는 Grid를 사용하세요.

두 개의 축

완벽한 가운데 정렬 — 유명한 사용 사례

흔한 패턴

왜 중요한가

관련 질문