Ch.5 Flexbox — 한 줄 레이아웃의 마법

정렬의 달인 되기

align-items로 교차축 정렬을 제어할 수 있다flex-wrap으로 줄바꿈을 허용할 수 있다flex-grow, flex-shrink의 역할을 이해한다

세로 가운데 정렬, CSS 최대 난제를 한 줄로?

웹 개발자를 수년간 괴롭힌 '세로 가운데 정렬'이 Flexbox에서는 align-items: center 단 한 줄로 해결됩니다.

아이템 크기가 다르거나 화면이 좁으면 어떻게 되지?

align-items, flex-wrap, gap — 교차축 정렬, 줄바꿈, 간격까지 마스터합시다.

article

핵심 내용

교차축 정렬과 간격 — Flexbox의 나머지 절반

.container {
  display: flex;

  /* 교차축(cross axis) 정렬 */
  align-items: stretch;      /* 늘려서 채움 (기본) */
  align-items: flex-start;   /* 위쪽 정렬 */
  align-items: center;       /* 세로 가운데! */
  align-items: flex-end;     /* 아래쪽 정렬 */

  /* 아이템 간 간격 */
  gap: 16px;                 /* 행·열 동일 간격 */
  row-gap: 16px;             /* 행 간격만 */
  column-gap: 8px;           /* 열 간격만 */
}

완벽한 가운데 정렬 공식 (가로 + 세로 동시): `display: flex; justify-content: center; align-items: center;` 이 세 줄이면 어떤 요소든 부모 안에서 정중앙에 놓입니다.

줄바꿈과 비율 — 유연한 레이아웃의 비밀

.container {
  display: flex;
  flex-wrap: wrap;   /* 넘치면 다음 줄로 */
  gap: 12px;
}

/* flex-grow: 남는 공간을 얼마나 차지할지 */
.sidebar { flex-grow: 1; }  /* 1 비율 */
.main    { flex-grow: 3; }  /* 3 비율 — 3배 넓음 */

/* flex 단축 속성 (grow shrink basis) */
.item { flex: 1; }          /* flex: 1 0 0% 과 동일 */

아바타와 텍스트가 나란히 있는 프로필 카드를 만들어봅시다

Flexbox에서 교차축(세로) 가운데 정렬을 하는 속성은?

Flex 아이템이 컨테이너 너비를 넘칠 때 다음 줄로 보내려면 flex-___: wrap을 사용한다

align-items는 주축(main axis) 방향으로 정렬한다

Flexbox 정렬 마스터!

key

핵심 용어

↩️

flex-wrap

nowrap(기본) / wrap(줄바꿈 허용)

📈

flex-grow

남는 공간 차지 비율 (기본 0 = 안 늘어남)

📉

flex-shrink

공간 부족 시 줄어드는 비율 (기본 1)

📐

flex-basis

아이템 기본 크기 (width 대신 사용)

edit_note

정리 노트

정렬의 달인 되기

정렬 속성

justify-content: 주축 방향 정렬 (가로 배치 시 좌우 정렬)
align-items: 교차축 방향 정렬 (가로 배치 시 상하 정렬)
gap: flex 아이템 사이의 간격을 지정

자주 쓰는 값

center: 가운데 정렬 — 가장 많이 사용
space-between: 양 끝 붙이고 균등 분배
flex-wrap: wrap: 공간 부족 시 자동 줄바꿈

★

가로세로 완전 가운데: display: flex + justify-content: center + align-items: center

check_circle

핵심 정리

1align-items: center → 교차축(세로) 가운데 정렬
2flex-wrap: wrap → 넘치면 다음 줄로 이동
3flex-grow로 남는 공간을 비율대로 분배

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작