flex-grow, flex-shrink, flex-basis는 어떻게 동작하나요?

Question

Accepted Answer

이 세 속성은 **flex item**에서 main axis를 따라 공간을 어떻게 나눌지 제어합니다. 단축 속성 `flex`가 이들을 결합합니다.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: 늘리거나 줄이기 전의 시작 크기 */
/*        │ └──── flex-shrink: 공간이 부족할 때 얼마나 줄어드는지 */
/*        └────── flex-grow: 남는 공간을 채우기 위해 얼마나 늘어나는지 */
```

## 각 속성 설명

- **`flex-basis`** — 아이템의 이상적/초기 main axis 크기(행에서의 `width`와 유사). `auto`는 콘텐츠 크기를 사용합니다.
- **`flex-grow`** — *남는* 공간이 있을 때 이 아이템이 얼마나 탐욕스럽게 확장하는지. `0` = 늘어나지 않음; 높은 숫자일수록 비례해 늘어남.
- **`flex-shrink`** — 공간이 *부족할* 때 이 아이템이 얼마나 쉽게 줄어드는지. `0` = 절대 줄지 않음(overflow 유발 가능); 기본값 `1` = 필요한 만큼 줄어듦.

## 비례해서 늘리기

```css
.a { flex-grow: 1; } /* 1 몫을 가짐 */
.b { flex-grow: 2; } /* 2 몫을 가짐 → .a보다 두 배의 남는 공간 */
```

남는 공간은 절대 크기가 아니라 grow 값의 비율로 나뉩니다.

## 흔한 단축 값

```css
.item { flex: 1; }      /* = 1 1 0  → 모든 아이템이 공간을 균등하게 나눔 (같은 너비) */
.item { flex: auto; }   /* = 1 1 auto → 콘텐츠 크기에 따라 늘고 줄어듦 */
.item { flex: none; }   /* = 0 0 auto → 고정 크기, 절대 늘거나 줄지 않음 */
.sidebar { flex: 0 0 250px; } /* 절대 flex하지 않는 고정 250px 사이드바 */
```

모든 아이템에 `flex: 1`을 주면 균등한 열이 되고, `flex: 0 0 250px`는 유연한 것 옆에 고정 너비 패널을 만듭니다.

## 실제 레이아웃: 고정 사이드바 + 유동 콘텐츠

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* 절대 늘거나 줄지 않음 — 정확히 250px */
.content { flex: 1; }          /* 남은 공간을 모두 차지 */
```

## 왜 중요한가

이 속성들은 flex 레이아웃에서 비례 크기 조절을 제어하는 방법입니다 — 균등한 열(`flex: 1`), 고정+유동 패널(`flex: 0 0 X` + `flex: 1`), 원치 않는 축소 방지(`flex-shrink: 0`).

basis/grow/shrink를 이해하면 Flexbox가 "아이템이 그냥 거기 있는" 상태에서 정밀하고 반응적인 제어로 바뀝니다.