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

Flexbox가 해결하는 문제

display: flex의 역할과 기본 동작을 이해한다flex-direction으로 주축 방향을 변경할 수 있다justify-content로 주축 정렬을 제어할 수 있다

요소들을 가로로 나란히 놓을 수 없을까?

div는 기본적으로 세로로 쌓입니다. 가로 배치를 위해 float를 쓰면 레이아웃이 무너지고, 가운데 정렬은 여전히 어렵습니다.

간단하게 가로·세로 배치를 전환할 수 없을까?

Flexbox — display: flex 한 줄이면 자식 요소들이 유연하게 정렬됩니다.

article

핵심 내용

display: flex 한 줄이면 레이아웃이 완전히 바뀝니다

방향을 바꾸고 간격을 조절해봅시다

.container {
  display: flex;

  /* 주축 방향 */
  flex-direction: row;            /* 가로 (기본값) */
  flex-direction: column;         /* 세로 */
  flex-direction: row-reverse;    /* 가로 역순 */

  /* 주축 정렬 */
  justify-content: flex-start;    /* 시작점 정렬 (기본) */
  justify-content: center;        /* 가운데 정렬 */
  justify-content: flex-end;      /* 끝점 정렬 */
  justify-content: space-between; /* 양 끝 붙이고 균등 배분 */
  justify-content: space-around;  /* 요소 양쪽에 같은 여백 */
  justify-content: space-evenly;  /* 모든 간격 동일 */
}

flex-start: |A B C |

center: | A B C |

space-between: |A B C|

space-evenly: | A B C |

세 개의 카드를 가로로 균등 배치해봅시다

Flexbox에서 아이템을 주축 기준으로 가운데 정렬하는 속성은?

display: flex를 선언하면 자식 요소들이 기본적으로 가로(row)로 배치된다

Flexbox에서 주축(main axis)의 기본 방향은?

Flexbox 입문!

key

핵심 용어

📦

Flex Container

display: flex를 선언한 부모 요소

🧩

Flex Items

컨테이너의 직계 자식 요소들

➡️

주축 (Main Axis)

아이템이 배치되는 방향 (기본: 가로)

⬇️

교차축 (Cross Axis)

주축에 수직인 방향 (기본: 세로)

edit_note

정리 노트

Flexbox가 해결하는 문제

Flexbox 기본

display: flex
부모에 적용하면 자식들이 가로로 나란히 배치
flex-direction
주축 방향 설정 — row(가로), column(세로)
justify-content
주축 정렬 — center, space-between, space-around

이전 방식의 문제

float
가로 배치는 되지만 레이아웃 붕괴 위험
Flexbox 장점
한 줄의 CSS로 유연한 레이아웃 완성
★

display: flex 하나면 가로 배치, 가운데 정렬, 균등 분배가 모두 가능합니다.

image

시각 자료

다이어그램: wd-scene-flexbox
check_circle

핵심 정리

  • 1display: flex → 자식 요소가 가로로 나란히 배치
  • 2flex-direction: row(가로) / column(세로) 전환
  • 3justify-content로 주축 정렬 (center, space-between 등)

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

play_circle인터랙티브 레슨 시작