HTML, CSS

flex-wrap 완전정복 – 넘치는 요소, 자동 줄바꿈의 모든 것

jonbeo 2025. 6. 1. 06:03
반응형

 

 

Flexbox로 정렬을 잘 해놨는데...
아이템이 많아지니까 한 줄에 너무 꽉 차서 깨지거나, 줄바꿈이 안 되던 경험 있으신가요?

그럴 때 필요한 속성이 바로 **flex-wrap**입니다!
자동 줄바꿈을 허용할지 말지, 이 속성이 정해줘요.

 

✅ 기본 문법

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

 

기본적으로 Flexbox는 한 줄에 모든 아이템을 우겨 넣으려고 해요
그래서 너비가 넘쳐도 줄바꿈이 안 되고 깨지거나 뒤엉켜버립니다.

 

🧩 속성값 정리

값 설명
nowrap 기본값. 줄바꿈 안 됨. 한 줄에 전부 배치
wrap 자동 줄바꿈 허용 (다음 줄로 내려감)
wrap-reverse 줄바꿈은 되지만 아래에서 위로 쌓임 (드물게 사용)

 

 

🧪 실습 예시

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  background: #eee;
}
.item {
  width: 100px;
  height: 80px;
  margin: 5px;
  background: #ffa07a;
  text-align: center;
}
</style>

 

이 코드는 아이템이 300px보다 많아지면 자동으로 다음 줄로 줄바꿈돼요!

 

🔄 flex-wrap + flex-direction 조합 팁

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

 

이렇게 조합하면 세로로 정렬하면서 줄바꿈까지 되는 레이아웃도 만들 수 있어요.
(다만 세로 줄바꿈은 UI 설계에 주의가 필요해요!)

 

🤔 언제 써야 할까?

  • 버튼, 카드, 이미지 갤러리 등 반응형 레이아웃에서 필수
  • 모바일 화면처럼 가로 공간이 좁을 때 깨지지 않게 하려면 꼭 필요
  • 사용자 입력/동적 콘텐츠가 많아질 때 유연한 레이아웃을 유지할 수 있음
반응형