AAtomic CSS

flex-wrap

플렉스 아이템이 한 줄에 강제로 배치될지, 여러 줄로 줄바꿈될지를 제어합니다. df와 함께 사용하며, 아이템 수가 많거나 컨테이너보다 넓을 때 줄바꿈 동작을 결정합니다.

클래스 목록

클래스CSS설명
fwnflex-wrap: nowrap기본값. 모든 아이템을 한 줄에 강제 배치
fwwflex-wrap: wrap공간 부족 시 다음 줄로 줄바꿈
fwrflex-wrap: wrap-reverse역방향 줄바꿈. 넘치는 아이템이 위로 쌓임

시각적 비교

고정 너비 컨테이너에 8개 아이템을 넣어 각 flex-wrap 값의 줄바꿈 동작을 비교합니다.

Nowrap (기본값) — df fwn

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

모든 아이템이 한 줄에 억지로 들어감. 공간이 부족하면 축소되거나 넘침

Wrap — df fww

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

공간이 부족하면 자연스럽게 다음 줄로 넘어감

Wrap-reverse — df fwr

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

줄바꿈이 역방향(아래→위)으로 발생. 첫 줄이 하단에 위치

언제 뭘 쓸까?

상황추천이유
수평 내비게이션 바fwn고정된 메뉴 항목이 한 줄에 유지되어야 함
태그 클라우드 / 태그 목록fww태그 수가 유동적이며 자연스럽게 줄바꿈 필요
카드 그리드 (flex 기반)fww카드가 컨테이너에 맞게 자동 줄바꿈
버튼 그룹fww화면이 좁을 때 버튼이 다음 줄로 내려감
역순 갤러리 / 채팅fwrbottom-up 흐름이 필요한 특수 레이아웃
툴바 / 탭fwn아이템이 항상 한 줄에 유지되어야 함

클래스별 상세

fwnflex-wrap: nowrap

기본값입니다. 모든 아이템이 한 줄에 강제로 배치되며, 컨테이너 너비를 초과하면 아이템이 축소되거나 오버플로우가 발생합니다. 수평 내비게이션, 툴바 등 아이템 수가 고정된 경우에 적합합니다.

<!-- 수평 내비게이션 (한 줄 고정) -->
<nav class="df fwn gap2rem aic">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

<!-- 오버플로우 방지: 스크롤 허용 -->
<div class="df fwn gap8px oxa">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
  <!-- 많은 아이템도 가로 스크롤로 접근 가능 -->
</div>

주의

아이템이 많으면 컨테이너를 넘칠 수 있습니다. oh(overflow: hidden)나 oxa(overflow-x: auto)와 함께 사용하면 넘침을 제어할 수 있습니다.

fwwflex-wrap: wrap

공간이 부족하면 아이템을 다음 줄로 내립니다. 가장 많이 사용되는 값으로, 태그 목록, 카드 그리드, 버튼 그룹 등 아이템 수가 유동적인 경우에 적합합니다.

<!-- 태그 목록 (자동 줄바꿈) -->
<div class="df fww gap8px">
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">HTML</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">CSS</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">JavaScript</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">TypeScript</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Vue</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Nuxt</span>
</div>

<!-- 카드 그리드 (미디어 쿼리 없이 반응형) -->
<div class="df fww gap2rem">
  <div class="fg1 fb20rem bg18181B p2rem br8px">Card 1</div>
  <div class="fg1 fb20rem bg18181B p2rem br8px">Card 2</div>
  <div class="fg1 fb20rem bg18181B p2rem br8px">Card 3</div>
  <div class="fg1 fb20rem bg18181B p2rem br8px">Card 4</div>
</div>

자주 쓰는 조합

df fww gap8px기본 줄바꿈 레이아웃. 태그, 뱃지, 필터 목록
df fww gap2rem jcc줄바꿈 + 가운데 정렬. 카드 갤러리
df fww gap16px aic줄바꿈 + 세로 가운데. 높이가 다른 아이템 정렬
df fww gap8px acfs줄바꿈 + 줄 간 정렬 상단. 여러 줄이 상단에 모임

fwrflex-wrap: wrap-reverse

줄바꿈이 역방향으로 발생합니다. 넘치는 아이템이 위쪽으로 쌓이는 bottom-up 흐름을 만듭니다. 채팅 인터페이스의 역순 정렬이나 특수한 갤러리 레이아웃에 활용됩니다.

<!-- 역순 줄바꿈 -->
<div class="df fwr gap8px">
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">1번</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">2번</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">3번</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">4번</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">5번</span>
  <span class="bg27272A cFAFAFA py4px px12px br4px fs14px">6번</span>
</div>

참고

fwr은 아이템의 시각적 순서만 변경하며, DOM 순서는 변하지 않습니다. 접근성에 유의하세요.

반응형

미디어 쿼리 프리픽스와 조합하면 화면 크기에 따라 줄바꿈 동작을 변경할 수 있습니다.

<!-- 데스크탑: 한 줄 / 태블릿 이하: 줄바꿈 허용 -->
<div class="df fwn md-fww gap16px">
  <div class="fb20rem bg18181B p2rem br8px">Item 1</div>
  <div class="fb20rem bg18181B p2rem br8px">Item 2</div>
  <div class="fb20rem bg18181B p2rem br8px">Item 3</div>
  <div class="fb20rem bg18181B p2rem br8px">Item 4</div>
</div>

<!-- 모바일: 줄바꿈 / 데스크탑: 한 줄 -->
<nav class="df fww sm-fwn gap12px">
  <a href="#">메뉴 1</a>
  <a href="#">메뉴 2</a>
  <a href="#">메뉴 3</a>
  <a href="#">메뉴 4</a>
</nav>
클래스 조합동작
df fwn md-fww기본 한 줄 → 1024px 이하에서 줄바꿈 허용
df fww sm-fwn기본 줄바꿈 → 768px 이하에서 한 줄 강제
df fwn sm-fww기본 한 줄 → 768px 이하에서 줄바꿈 허용
df fww lg-fwn기본 줄바꿈 → 1280px 이하에서 한 줄 강제

팁 & 주의사항

fww + gap = 미디어 쿼리 없는 반응형

df fww gap16px만으로 아이템이 자동으로 줄바꿈되는 반응형 레이아웃을 만들 수 있습니다. 아이템에 minw를 지정하면 줄바꿈 시점을 제어할 수 있습니다.

fww는 align-content를 활성화합니다

fwn(기본값)에서는 align-content가 작동하지 않습니다. fww로 변경해야 줄 간 정렬(acs, acsb 등)을 사용할 수 있습니다.

flex-basis / min-width로 줄바꿈 시점 제어

fww와 함께 각 아이템에 fb20rem(flex-basis) 또는 minw20rem(min-width)를 적용하면, 아이템이 해당 크기 이하로 축소되지 않고 다음 줄로 넘어갑니다.

flex-directionalign-contentgapdisplay