[CSS] Flexbox - flex wrap

1. flex-wrap이란?

Flexbox에서 아이템이 한 줄에 다 들어가지 않을 때,
줄바꿈을 허용할지 여부를 결정하는 속성입니다.

.container {
  display: flex;
  flex-wrap: wrap;
}

 

2. 주요 값 정리

1️⃣ nowrap (기본값)

flex-wrap: nowrap;

• 모든 아이템을 한 줄에 강제로 배치
• 컨테이너를 넘쳐도 줄바꿈 ❌

2️⃣ wrap

flex-wrap: wrap;

• 공간이 부족하면 다음 줄로 자동 이동
• 반응형 레이아웃에서 가장 많이 사용

3️⃣ wrap-reverse

flex-wrap: wrap-reverse;

• 줄바꿈은 되지만 교차축 방향이 반대
• 위 ↔ 아래 순서가 뒤집힘

 

3. 배치 흐름 이해하기

• flex-direction → 정렬 방향
• flex-wrap → 줄바꿈 여부
• 둘이 합쳐져 아이템 흐름(flow) 을 만듦

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

가로 정렬 + 자동 줄바꿈

 

4. 정리하면

• flex-wrap은 줄바꿈 제어 속성
• wrap은 반응형 레이아웃의 기본
• 여러 줄이 생기면 → 정렬 기준이 라인 단위로 나뉨

flex-wrap은 Flexbox에서 컨테이너를 넘어가는 아이템의 흐름을 제어하는 스위치다.