flex-grow, flex-shrink, flex-basis: sizing 세쌍둥이

"flex 가 실제로는 셋인 하나의 property. 세 패턴 외우면 끝."

세 sub-property

모든 flex 자식이 크기 결정하는 property 셋 가짐:

flex-grow (기본 0) — main 축의 추가 공간 몫. flex-grow: 1 이 leftover 공간의 1/total-grow 가짐.
flex-shrink (기본 1) — overflow 감소 몫. flex-shrink: 1 은 공간 부족할 때 항목이 줄어듦; flex-shrink: 0 은 줄어들기 거부.
flex-basis (기본 auto) — grow/shrink 계산 전 시작 크기. auto 는 "항목의 content 크기나 width property 사용"; 200px 같은 length 는 "content 무관 200px 에서 시작".

`flex` 약자

flex: . 값 셋, 그 순서로. 예:

flex: 1 1 0 — grow 1, shrink 1, 0 에서 시작. 이거 가진 모든 sibling 이 동등 너비.
flex: 1 1 auto — grow 1, shrink 1, content/auto 크기에서 시작. 이거 가진 모든 sibling 이 content 기반 비례 몫.
flex: 0 0 200px — grow 없음, shrink 없음, 고정 200px. 잠김.
flex: 0 1 auto — flex 자식의 기본. Content 크기, 필요 시 shrink, grow 안 함.

95% 의 경우 쓰는 세 패턴

flex: 1 — 1 1 0 의 약자. 동등 분배. 패턴: "이 sibling 모두가 사용 가능한 공간 균등 분할."
flex: auto — 1 1 auto 의 약자. Content 비례 몫. 패턴: "이 항목들이 추가 공간 공유하지만 content 크기가 시작 포인트로 중요."
flex: none — 0 0 auto 의 약자. Grow 안 함, shrink 안 함. 패턴: "이 항목이 정확히 content 크기 유지."

이 셋 외워. 너가 쓸 거의 모든 layout 커버. 정밀 필요할 때 명시적 3-값 형태 (flex: 1 1 200px) 잡아.

동등 너비 column 패턴

세 column 이 content 무관 row 를 동등하게 공유하길 원해? 각자에 flex: 1. 세 column 중 하나가 300px 고 나머지 둘이 나머지 동등 분할? 첫에 flex: 0 0 300px, 나머지에 flex: 1.

사이드바 + main 패턴

고정 너비 사이드바와 유연한 main content 영역:

또는 — 그리고 2026 년에 더 idiomatic — Grid 사용: grid-template-columns: 240px 1fr. 같은 효과, 타이핑 적음. Flexbox 도 여기서 여전히 맞음; Grid 가 두 column 패턴에 더 선언적.

기본 `min-width: auto` 함정

Flex 항목이 암묵적 min-width: auto 가짐, 대략 "가장 긴 unbreakable content (긴 단어, 이미지의 intrinsic 크기) 크기 밑으로 안 줄어듦" 의미. 보통 도움 되지만 가끔 신비한 overflow 일으킴: 긴 URL 이나 unbreakable 텍스트 가진 자식 포함하는 flex row 가 자식 shrink 거부, row 를 컨테이너 너머로 밀어.

Fix: shrink 허용되어야 할 flex 자식의 min-width: 0. 이 명시적 override 가 암묵적 minimum 제거하고 flex-shrink 가 일 하게 둠. 채팅 UI (긴 paste URL) 와 tables-as-flex 에 가장 흔함.

한 자식 때문에 flex row 가 신비하게 overflow 하면, 암묵적 min-width: auto 의심. 문제 일으키는 자식에 min-width: 0 추가. 이 단일 fix 가 나머지 flexbox 다 안다는 것 합친 것보다 시간 더 절약.

Order: source 순서 재정렬자

Flex 자식의 order property 가 source 순서 안 바꾸고 시각 위치 변경. 기본 0; 낮은 값이 먼저, 높은 값이 마지막. 패턴: 시각 layout 위에 label 이 있지만 source 순서 바닥인 (SEO/접근성 위해) 카드, label 에 order: -1 사용.

절제해서. order 가 screen reader 사용자 (source 순서로 읽음) 와 키보드 사용자 (Tab 순서가 source 따라감) 혼란시킬 수 있어. Source 순서가 non-visual 이유 (semantic, 문서 구조) 로 잘못될 때만 시각 재정렬.

피파의 노트

피파의 채팅 composer 가 flex row: 왼쪽에 textarea (flex: 1 — 사용 가능 너비 채움), 오른쪽에 send 버튼 (flex: none — 고정 아이콘 크기). CSS 세 줄. 대화 리스트가 flex column 인데 모든 대화 row 가 flex: 0 0 auto (grow 안 함, shrink 안 함, content 크기 가짐), row 의 title 에 min-width: 0 줘서 긴 대화 title 이 row 를 더 넓게 미는 대신 text-overflow: ellipsis 로 truncate.

Code

세 약자 형태·css

/* 외울 세 패턴 */

/* 동등 분배: 모든 자식이 같은 너비 */
.equal-row > * { flex: 1; }              /* = 1 1 0 */

/* Content 비례: 자식이 공유하지만 content 중요 */
.content-row > * { flex: auto; }         /* = 1 1 auto */

/* 고정: 이 자식이 grow 도 shrink 도 안 함 */
.fixed-item { flex: none; }              /* = 0 0 auto */

사이드바 + main, 두 가지 방법·css

/* Flexbox 로 사이드바 + main */
.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  flex: 0 0 240px;       /* 고정 240px, grow 도 shrink 도 안 함 */
}
.main {
  flex: 1;               /* 나머지 가짐 */
  min-width: 0;          /* intrinsic content 너머 shrink 허용 (overflow 피함) */
}

/* Grid 로 같은 layout (종종 더 깨끗) */
.layout-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

min-width: 0 — 가장 유용한 flex 주문·css

/* 암묵적 min-width: auto 함정 */

.row {
  display: flex;
  gap: 1rem;
  width: 500px;            /* 부모가 고정 너비 가짐 */
}
.row > .title {
  flex: 1;                 /* 공유하게 shrink 해야 함 */
}

/* 하지만 .title 이 긴 단어나 unbreakable URL 포함하면, flex-shrink 가 1 인데도
   단어의 intrinsic 너비 너머로 shrink 거부. 암묵적 min-width: auto 가 shrink 막아. */

.row > .title {
  flex: 1;
  min-width: 0;            /* 명시적 override — 이제 title shrink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;     /* ellipsis 위해 min-width: 0 와 결합 */
}

/* 이 세 줄 추가가 임의 텍스트 포함하고 우아하게 truncate 해야 하는
   어떤 flex 자식에든 표준 패턴 */

Exercise

Layout 셋 만들기: (1) flex: 1 가진 동등 너비 column 셋 (DevTools 에서 동등 확인); (2) 고정 200px 사이드바 하나 + 나머지 동등 공유하는 유연 column 둘; (3) 아바타 (flex: none, 40px), 남은 너비 가지는 이름과 메시지 (flex: 1, min-width: 0, 텍스트 truncation), 그리고 timestamp (flex: none, auto 너비) 가진 채팅 row. 부모를 더 좁게 만들고 맞는 것들이 shrink 하거나 truncate 되는지 확인해서 각자 테스트.

Hint

#3 의 경우 매우 긴 URL 을 메시지 텍스트에 paste 하고 row 를 더 넓게 밀지 않고 ellipsis 로 truncate 되는지 확인. 더 넓게 밀면 flex: 1 자식의 min-width: 0 빼먹은 거.

flex-grow, flex-shrink, flex-basis: sizing 세쌍둥이

세 sub-property

`flex` 약자

95% 의 경우 쓰는 세 패턴

동등 너비 column 패턴

사이드바 + main 패턴

기본 `min-width: auto` 함정

Order: source 순서 재정렬자

피파의 노트

Code

External links

Exercise

Progress

댓글 0

세 sub-property

flex 약자

95% 의 경우 쓰는 세 패턴

동등 너비 column 패턴

사이드바 + main 패턴

기본 min-width: auto 함정

Order: source 순서 재정렬자

피파의 노트

Code

External links

Exercise

Progress

`flex` 약자

기본 `min-width: auto` 함정