Week 1 · 웹이 작동하는 방식 Day 5 / 42

Flexbox — 1차원 정렬 완전 정복

요소들을 내 마음대로 가로세로 배치하는 마법의 지휘봉

10초 핵심 요약

01

Flexbox의 핵심: 부모에게 명령하라

기차를 상상해 보세요. 여러 개의 객차(자식 요소)들을 나란히 움직이게 하려면, 객차 하나하나에 직접 명령할 필요가 없습니다. 맨 앞의 기관차(부모 요소)에게 "앞으로 가!"라고 명령하면 뒤의 객차들은 알아서 예쁘게 따라옵니다.

정렬하고 싶은 요소들을 감싸는 부모 태그에 display: flex;를 선언하면, 그 안의 자식 요소들이 자동으로 가로로 나란히 배치됩니다.

/* HTML 구조: 부모(container) 안에 자식(item) 3개 */
.container {
  display: flex; /* 마법의 시작: 부모가 리모컨을 쥡니다 */
}
초보자 1위 실수 — "왜 코드를 넣었는데 정렬이 안 되지?" 하고 보면 십중팔구 자식 요소에 display: flex;를 넣은 경우입니다. 정렬의 주도권은 항상 부모에게 있습니다.
02

부모의 4가지 리모컨 (Container 속성)

부모에게 display: flex;를 주었다면, 이제 아래 4가지 속성으로 자식들을 마음대로 배치할 수 있습니다.

justify-content (가로 정렬)

center: 중앙으로 모으기 · space-between: 양 끝으로 벌리기. "가로축으로 어떻게 배치할까?"

align-items (세로 정렬)

center: 세로 중앙 맞추기 · flex-start: 위쪽으로 붙이기. "세로축으로 어떻게 맞출까?"

gap (간격)

자식들 사이 간격을 지정합니다. 요즘 브라우저는 다 지원하니 기본으로 쓰면 됩니다.

flex-direction (방향)

row: 가로 배치(기본값) · column: 세로 배치. 모바일 화면 만들 때 필수 속성입니다.

예상해보세요: flex-direction을 column으로 바꾸면, 지금 justify-content가 맞추던 축은 가로일까요 세로일까요? 버튼을 눌러 직접 확인하세요.

flex-direction
justify-content
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
중심축 전환 주의 (멘붕 방지) — 방금 확인했듯 flex-direction을 column으로 바꾸면 축이 뒤집힙니다. 가로를 담당하던 justify-content가 세로 정렬을, align-items가 가로 정렬을 담당하게 됩니다.
03

자식들의 성격 정하기 (Item 속성)

부모가 전체 틀을 잡는다면, 안쪽에 있는 자식(Item)들은 각자의 '성격'을 가질 수 있습니다. 고무풍선처럼 늘어나거나, 벽돌처럼 크기를 고집하거나 둘 중 하나입니다.

고무풍선(flex: 1;)은 남는 공간을 물처럼 쫙 채웁니다. 화면이 커지면 같이 커집니다 — 메인 본문 영역에 적합합니다. 벽돌(flex: 0 0 280px;)은 늘어나지도 줄어들지도 않고 딱 280px 크기를 고집합니다 — 사이드바에 적합합니다.

04

실전 적용: 헤더와 2단 레이아웃

실전 1 — 로고는 왼쪽, 메뉴는 오른쪽(헤더). 가장 많이 쓰는 상단 바 패턴입니다. 양 끝으로 밀어내는 space-between을 사용합니다.

.header-container {
  display: flex;
  justify-content: space-between; /* 양 끝으로 벌리기 */
  align-items: center; /* 세로 중앙 맞추기 */
}

실전 2 — 본문 + 사이드바(반응형 무결점 코드). 본문은 유연하게(풍선), 사이드바는 고정(벽돌)시킵니다. 모바일에서는 사이드바의 벽돌 크기를 반드시 리셋해야 레이아웃이 깨지지 않습니다.

/* 💻 PC 화면 (가로 배치) */
.wrap { display: flex; }

.main-content {
  flex: 1; /* 풍선: 남는 공간 차지 */
  margin-right: 40px;
}
.sidebar { flex: 0 0 280px; /* 벽돌: 280px 고정 */ }

/* 📱 모바일 화면 (768px 이하) */
@media (max-width: 768px) {
  .wrap { flex-direction: column; /* 세로로 쌓기 */ }
  .main-content { margin-right: 0; margin-bottom: 40px; }
  .sidebar { flex: auto; /* 고정 크기 해제! 매우 중요 */ width: 100%; }
}
05

흔한 실수와 해결 방법

증상원인해결 방법
정렬 속성을 넣었는데 전혀 안 움직임정렬할 '자식' 태그에 코드를 넣음부모 태그에 display: flex; 선언
글씨가 길어지면 사이드바가 찌그러짐자식 아이템의 크기 고정이 안 됨flex: 0 0 280px; 적용
스마트폰에서 레이아웃이 엉망이 됨사이드바 고정 크기 리셋 누락@media 안에 flex: auto; width: 100%; 추가
위 표에서 못 찾은 증상이라면 F12 → Elements에서 부모 요소를 클릭해 Styles 패널에 display: flex;가 실제로 적용돼 있는지부터 확인하세요. 취소선이 보인다면 다른 CSS에 우선순위로 밀린 것입니다.
스스로 설명해보기 — flex 속성을 자식이 아니라 부모에게 줘야 하는 이유를 설명할 수 있나요?
06

오늘의 실습

1좌측 본문(.main)과 우측 사이드바(.sidebar) 2단 레이아웃을 위 코드로 직접 만들어봅니다.
2F12 → 반응형 모드를 켜고 화면 너비를 줄였다 늘였다 하면서 세로 배치로 바뀌는 시점을 관찰합니다.
AI에게 이렇게 지시해 보세요: "본문(.main)과 사이드바(.sidebar)가 있는 2단 레이아웃을 코딩할 거야. PC에서는 본문이 남는 공간을 다 차지하고 사이드바는 280px 고정, 768px 이하 모바일에서는 세로로 쌓이고 사이드바 크기가 100% 꽉 차도록 리셋하는 코드를 포함해줘."

오늘의 용어

display: flex
부모에게 선언하면 자식들을 한 방향으로 정렬해주는 레이아웃 방식
justify-content
가로 정렬을 담당 (row 기준, column이면 세로로 뒤바뀜)
align-items
세로 정렬을 담당 (row 기준, column이면 가로로 뒤바뀜)
flex-direction
배치 방향(row/column). column이면 정렬 축이 뒤바뀜
flex: 1
남는 공간을 물처럼 채우는 고무풍선 방식
flex: 0 0 280px
늘어나지도 줄어들지도 않는 벽돌 방식(크기 고정)

핵심 3줄 요약