Production 의 Flexbox: 매일 쓸 패턴

"열 패턴이 layout 작업의 90% 커버. 외우고 재발명 그만."

1. Sticky Footer

페이지에 header, main content, footer 가짐. Content 짧으면 footer 가 viewport 바닥에, content 길면 content 아래.

body { display: flex; flex-direction: column; min-height: 100vh; } + main { flex: 1; }. 세 줄.

2. 가운데 정렬 Modal (또는 Hero)

컨테이너 안에서 수직, 수평 둘 다 가운데 정렬된 박스.

.container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }. 또는 Grid place-items: center.

3. 로고 + 메뉴 + Action 가진 Navbar

왼쪽 로고, navigation 메뉴, 오른쪽 사용자 action.

두 접근:

로고, 메뉴, action 을 세 직접 자식으로 가지는 justify-content: space-between.
Sibling 들을 떨어뜨려야 할 어떤 중간 그룹의 margin-left: auto (자식 5+ 일 때 더 유연).

4. 동등 너비 버튼 행

Label 길이 무관 행을 동등하게 공유하는 버튼 둘 또는 셋.

.btn-row { display: flex; gap: 0.5rem; } + .btn-row > button { flex: 1; }.

5. Truncating 채팅 row

아바타, 이름 + 메시지, timestamp — 단일 row 에, row 가 좁을 때 메시지가 우아하게 truncate.

6. 바닥에 Pinned 된 Footer 가진 카드

Title, body, 바닥의 CTA 가진 카드. Body 짧을 때도 CTA 가 바닥에 앉아야 함.

카드를 고정 높이 flex column 으로, body 에 자연 크기, CTA 에 margin-top: auto.

7. 다양한 너비 input 가진 폼 행

이름 + 성 + 이메일 행 — 이름과 성이 동등 공유, 이메일은 두 배 공간.

8. Aside + Main Layout

고정 너비 사이드바 + 유연 main. Lesson 3 에서 봤어. 사이드바의 flex: 0 0 240px, main 의 flex: 1; min-width: 0 가진 display: flex.

9. Tag/Chip Wrap

Fit 안 될 때 여러 줄로 wrap 하는 태그 행.

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }. 각 태그 auto 크기; 행이 자연스럽게 wrap.

10. 모바일에서 재정렬

좁은 화면에서 (텍스트 먼저, 이미지 아래) 로 전환되는 두 column layout (이미지 왼쪽, 텍스트 오른쪽).

Media query 에서 order 사용 — 하지만 가능하면 grid template areas 로 재구성 선호.

Layout 패턴은 트릭이 아니라 어휘. 위 패턴들이 2026 년 production 코드에서 Flexbox 가 쓰이는 방법. 야생에서 알아보고 매번 기본 원리에서 재계산하는 대신 의도적으로 잡아.

마주칠 anti-pattern

Layout 달성에 flex 컨테이너 4 레벨 깊이 중첩 — 거의 항상 Grid 가 맞는 답이었음을 뜻함.
Sticky footer 에 position: absolute 사용 — 작동하지만 content 가 스크롤 필요할 만큼 길면 깨짐. Flexbox 가 맞는 도구.
Flex 자식에 vertical-align: middle 사용 — 아무것도 안 함. 부모에 align-items 써.
flex 가 할 일에 자식 너비 설정 — flex: 1 이 width: 33.333% 보다 유연.
Spacing 위해 마지막 빼고 모든 자식에 margin-right 추가 — gap 써.

피파의 노트

피파의 WebUI 가 위 열 패턴 모두 써. 채팅 composer 가 패턴 5 (truncating row). Council UI 가 패턴 7 (다양한 너비). 사이드바가 패턴 8 (aside + main). Artifact viewer 의 tag chip 이 패턴 9 (wrap). 앱 셸 전체가 패턴 8 (사이드바) 감싸는 패턴 1 (sticky footer). 패턴 인식한다는 건 분이 아니라 초 단위로 남의 코드 읽을 수 있다는 거.

Code

패턴 1-3·css

/* 패턴 1 — Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
main { flex: 1; }

/* 패턴 2 — 가운데 정렬 modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

/* 패턴 3 — Navbar */
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
}
.nav .links { display: flex; gap: 1rem; }
.nav .actions { margin-left: auto; display: flex; gap: 0.5rem; }

패턴 5-6 — truncation 과 pinning·css

/* 패턴 5 — Truncating 채팅 row */
.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.chat-row .avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.chat-row .body {
  flex: 1;
  min-width: 0;           /* 자식 truncation 위해 필요 */
}
.chat-row .body .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-row .time {
  flex: none;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

/* 패턴 6 — 바닥에 pinned 된 footer 가진 카드 */
.card {
  display: flex;
  flex-direction: column;
  height: 300px;
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--bg-card);
}
.card .cta {
  margin-top: auto;       /* 바닥으로 밂 */
}

패턴 7, 9, 10 — 다양한 너비, wrap, 재정렬·css

/* 패턴 7 — 다양한 너비 가진 폼 row */
.form-row {
  display: flex;
  gap: 1rem;
}
.form-row > .name { flex: 1; }       /* 이름 + 성 공유 */
.form-row > .name-last { flex: 1; }
.form-row > .email { flex: 2; }      /* 이메일이 2 배 */

/* 패턴 9 — Tag wrap */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tags > .tag {
  flex: none;             /* tag 가 grow 도 shrink 도 안 함 */
  padding: 0.25rem 0.75rem;
  background: var(--accent-subtle);
  border-radius: 4px;
}

/* 패턴 10 — 모바일에서 재정렬 (반응형 이미지 + 텍스트) */
.split {
  display: flex;
  gap: 2rem;
}
@media (max-width: 768px) {
  .split { flex-direction: column; }
  .split .image { order: 2; }       /* 좁은 화면에서 이미지가 텍스트 뒤 */
  .split .text { order: 1; }
}

Exercise

위에서 패턴 셋 골라서 단일 데모 페이지에 짓기. 제안: (1) sticky footer 가 (2) navbar + 사이드바 + main 을 감싸고, (3) main 안에 wrap 하는 tag chip. 그러고 나서 브라우저를 1400px 부터 360px 까지 리사이즈하고 깨지지 않고 reflow 되는지 확인. 각 패턴이 좁은 너비에서 작동 그만하는 순간 식별 — 그게 다음 트랙 (Grid) 와 Track 7 의 반응형 디자인이 들어오는 자리.

Hint

Navbar 가 좁은 너비에서 overflow 하면 column 으로 전환하거나 hamburger 뒤로 메뉴 숨기는 media query 필요. 채팅 row 가 overflow 하면 min-width: 0 빼먹은 거. 사이드바가 main 을 화면 밖으로 밀면 모바일에서 stack layout 으로 전환.

1. Sticky Footer

2. 가운데 정렬 Modal (또는 Hero)

3. 로고 + 메뉴 + Action 가진 Navbar

4. 동등 너비 버튼 행

5. Truncating 채팅 row

6. 바닥에 Pinned 된 Footer 가진 카드

7. 다양한 너비 input 가진 폼 행

8. Aside + Main Layout

9. Tag/Chip Wrap

10. 모바일에서 재정렬

마주칠 anti-pattern

피파의 노트

Code

External links

Exercise

Progress

댓글 0