flex-wrap — 자식이 한 줄을 넘으면 다음 줄로 완전 정리

 

 

Web Development · Flexbox

flex-wrap — 자식이 넘치면 다음 줄로

기본 nowrap · wrap · 자식이 줄어들지 않고 줄바꿈

시작 오늘 분석할 코드

flex의 기본은 nowrap이라 자식들이 부모를 넘어도 강제로 줄여서 한 줄에 욱여넣는다. flex-wrap: wrap을 추가하면 자식들이 원래 폭을 유지하고, 못 들어가면 다음 줄로 내려간다.

#container { width: 500px; display: flex; flex-wrap: wrap; /* 넘치면 다음 줄로 */ } #container div { width: 200px; } /* 200 × 3 = 600 > 500 → 두 개는 첫 줄, 한 개는 둘째 줄 */

실제 출력 미리보기

❌ flex-wrap 없음 (기본 nowrap) — 자식이 강제로 작아짐

1

2

3

✓ flex-wrap: wrap — 못 들어가면 다음 줄로

1

2

3

용어 용어 정리

flex-wrap자식 줄바꿈 정책

nowrap (기본)한 줄 강제 — 자식이 작아짐

wrap넘치면 다음 줄로

wrap-reverse다음 줄이 위쪽으로

flex-shrink자식이 얼마나 줄어들지 (기본 1)

자식 폭 유지wrap이면 원래 폭 그대로 유지

반응형 그리드wrap + 가변 폭으로 자동 단수

align-content여러 줄 사이 간격 (wrap일 때만)

---

1 nowrap의 강제 축소 동작

flex의 기본은 "한 줄에 다 들어가도록 자식을 줄여서라도"다. 자식 200px × 3 = 600px이지만 부모 500px에 욱여넣어 각각 약 165px로 자동 축소된다(flex-shrink: 1 기본).

---

2 wrap의 줄바꿈 동작

flex-wrap: wrap이 켜지면 자식 폭은 그대로다. 못 들어가는 자식은 다음 줄로 떨어진다. 200×2 = 400 ≤ 500이라 첫 줄에 2개, 셋째 자식은 둘째 줄.

[width:500 부모 / width:200 자식 3개] [기본 nowrap] [wrap] ┌─────────────────────┐ ┌─────────────────────┐ │ ┌───┐┌───┐┌───┐ │ │ ┌───┐┌───┐ │ │ │ 1 ││ 2 ││ 3 │ │ │ │ 1 ││ 2 │ │ │ └───┘└───┘└───┘ │ │ └───┘└───┘ │ │ (각각 165px로 축소) │ │ ┌───┐ │ └─────────────────────┘ │ │ 3 │ │ │ └───┘ │ └─────────────────────┘

---

3 자식 폭이 부모와 안 맞을 때

500px 부모에 200px 자식 3개라 한 줄에 2개가 정확히 400px로 들어간다. 만약 자식이 250px이라면? 한 줄에 2개도 안 들어간다(500px) → 한 줄에 1개씩, 총 3줄이 된다.

※ 반응형 그리드 만드는 패턴

• 자식 폭을 % 또는 vw·calc로 가변
• width: calc(33.33% - 16px); flex-grow: 1; — 한 줄에 3개, 마지막 줄에 자투리 있으면 가득 채움
• 최신: display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

---

 

반응형

 

4 wrap-reverse — 다음 줄이 위로

flex-wrap: wrap-reverse는 줄바꿈은 일어나는데 새 줄이 아래가 아니라 위에 추가된다. 시각적으로 자식이 위쪽으로 쌓이는 효과. (다음 파일에서 자세히 다룸)

---

5 자주 하는 실수

실수	증상	해결
자식이 자꾸 줄어듦	nowrap 기본값 + flex-shrink:1	flex-wrap:wrap 또는 flex-shrink:0
wrap인데 줄바꿈 안 됨	자식 폭이 작아 한 줄에 다 들어감	자식 폭 늘리거나 부모 폭 줄이기
줄 사이 간격 큼	여러 줄이 부모 height에 맞춰 분산	align-content: flex-start
자식 간 간격 부족	딱 붙음	gap 속성 사용
가변 폭 + flex-grow 무지	자식 끝줄 자투리에 한 개만	flex-grow: 1 또는 grid 사용

---

핵심 한 줄 요약

flex-wrap자식 줄바꿈 정책

nowrap (기본)한 줄 강제 — 자식 축소

wrap넘치면 다음 줄로 — 자식 폭 유지

자식 폭과 부모한 줄 가능 갯수 = 부모 ÷ 자식

반응형 그리드wrap + 가변 폭 + flex-grow

최신 대안grid auto-fit + minmax

Tags

#flexbox #flex-wrap #nowrap #wrap #줄바꿈 #반응형그리드 #flex-grow #grid대안 #auto-fit #minmax #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

flexbox, flex-wrap, nowrap, wrap, 줄바꿈, 반응형그리드, flex-grow, grid대안, auto-fit, minmax, CSS, HTML, 웹개발, 티스토리