AAtomic CSS

flex-wrap

Controls whether flex items are forced onto a single line or can wrap to multiple lines. Used with df, and determines wrapping behavior when there are many items or they exceed the container width.

Class List

ClassCSSDescription
fwnflex-wrap: nowrapDefault. Forces all items onto a single line
fwwflex-wrap: wrapWraps to next line when space is insufficient
fwrflex-wrap: wrap-reverseReverse wrapping. Overflowing items stack upward

Visual Comparison

Compares the wrapping behavior of each flex-wrap value by placing 8 items in a fixed-width container.

Nowrap (default value) — df fwn

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

All items forced onto one line. Items shrink or overflow if space is insufficient

Wrap — df fww

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

Naturally wraps to next line when space is insufficient

Wrap-reverse — df fwr

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

Wrapping occurs in reverse (bottom to top). First line is at the bottom

When to Use What?

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

Class Details

fwnflex-wrap: nowrap

Default value. All items are forced onto a single line. If they exceed the container width, items shrink or overflow occurs. Suitable for horizontal navigation, toolbars, etc. with a fixed number of items.

<!-- Horizontal navigation (single line fixed) -->
<nav class="df fwn gap2rem aic">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

<!-- Prevent overflow: allow scrolling -->
<div class="df fwn gap8px oxa">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
  <!-- Many items accessible via horizontal scroll -->
</div>

Caution

Too many items can overflow the container. Combine with oh(overflow: hidden) or oxa(overflow-x: auto) to control overflow.

fwwflex-wrap: wrap

Wraps items to the next line when space is insufficient. The most commonly used value, suitable for tag lists, card grids, button groups, etc. with a variable number of items.

<!-- Tag list (auto wrapping) -->
<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>

<!-- Card grid (responsive without media queries) -->
<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>

Common Combinations

df fww gap8pxDefault wrap layout. Tags, badges, filter lists
df fww gap2rem jccWrap + center alignment. Card gallery
df fww gap16px aicWrap + vertical center. Aligning items of different heights
df fww gap8px acfsWrap + top row alignment. Multiple rows gathered at top

fwrflex-wrap: wrap-reverse

Wrapping occurs in reverse direction. Overflowing items stack upward, creating a bottom-up flow. Used for reverse-ordered chat interfaces or special gallery layouts.

<!-- Reverse wrapping -->
<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>

Note

fwr only changes visual order of items; DOM order remains unchanged. Be mindful of accessibility.

Responsive

Combined with media query prefixes, you can change wrapping behavior based on screen size.

<!-- Desktop: single line / Tablet and below: allow wrapping -->
<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>

<!-- Mobile: wrap / Desktop: single line -->
<nav class="df fww sm-fwn gap12px">
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
  <a href="#">Menu 4</a>
</nav>
<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class CombinationBehavior
df fwn md-fwwDefault single line, wrapping at 1024px and below
df fww sm-fwnDefault wrap, single line forced at 768px and below
df fwn sm-fwwDefault single line, wrapping at 768px and below
df fww lg-fwnDefault wrap, single line forced at 1280px and below

Tips & Notes

fww + gap = responsive without media queries

df fww gap16px alone creates a responsive layout where items wrap automatically. Specifying minw on items controls the wrap breakpoint.

fww activates align-content

align-content does not work with fwn(default). Switch to fww to use row alignment (acs, acsb, etc.).

Control wrap point with flex-basis / min-width

With fww, applying fb20rem(flex-basis) or minw20rem(min-width) to each item prevents items from shrinking below that size, wrapping to the next line instead.

flex-directionalign-contentgapdisplay