flex-direction
Controls the direction of flex items. Must be used with df(display: flex) and determines the direction of the main axis.
Class List
| Class | CSS | Description |
|---|---|---|
fdr | flex-direction: row | Default. Arranges items from left to right |
fdrr | flex-direction: row-reverse | Arranges items from right to left |
fdc | flex-direction: column | Arranges items vertically from top to bottom |
fdcr | flex-direction: column-reverse | Arranges items vertically from bottom to top (reverse) |
Visual Comparison
Compares how items 1, 2, 3 are arranged based on each flex-direction value.
Row (left to right) — df fdr
Default. Items are placed side by side from left to right
Row Reverse (right to left) — df fdrr
Items are arranged in reverse from right to left
Column (top to bottom) — df fdc
Items stack vertically from top to bottom
Column Reverse (bottom to top) — df fdcr
Items stack in reverse from bottom to top
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| 수평 네비게이션, 헤더 | df fdr | 기본 가로 배치. 명시적 선언으로 의도 표현 |
| 모바일 Vertical stack | df fdc | 폼 필드, 카드 내부 등 세로 배치 |
| RTL 레이아웃, 역순 배치 | df fdrr | DOM 변경 없이 시각적 순서 뒤집기 |
| 역순 목록, 채팅 UI | df fdcr | 최신 항목이 아래에 위치하는 역순 스택 |
Class Details
fdrflex-direction: row
Default value. Arranges items from left to right. Used to explicitly declare row direction. Used in most situations requiring horizontal layout such as header navigation, button groups, etc.
<!-- Header Navigation -->
<header class="df fdr jcsb aic px2rem py16px">
<div>Logo</div>
<nav class="df fdr gap2rem">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<!-- Button group -->
<div class="df fdr gap8px">
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Confirm</button>
<button class="py8px px16px bg27272A cFFFFFF br8px bn cp">Cancel</button>
</div>Common Combinations
df fdr jcc aic | horizontal placement + center alignment |
df fdr jcsb aic | Space between placement (header, navigation) |
df fdr fww gap16px | Horizontal with wrapping (tag list) |
df fdr gap8px aic | horizontal placement + spacing + vertical center |
fdrrflex-direction: row-reverse
Arranges items from right to left. Used to visually reverse order without changing DOM order. Useful for RTL (right-to-left) layouts or reverse arrangement needs.
<!-- Reverse button order (confirm button on right) -->
<div class="df fdrr gap8px">
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Confirm</button>
<button class="py8px px16px bg27272A cFFFFFF br8px bn cp">Cancel</button>
</div>
<!-- RTL-style layout -->
<div class="df fdrr gap2rem p2rem">
<aside class="bg18181B p2rem br8px">Sidebar (Right)</aside>
<main class="fg1 bg27272A p2rem br8px">Main Content</main>
</div>Accessibility note
fdrr only changes visual order; DOM order and tab order remain the same. Screen readers and keyboard navigation follow DOM order, so different visual and logical orders can cause confusion.
fdcflex-direction: column
Stacks items vertically from top to bottom. The second most used direction after fdr. Used for form fields, card interiors, lists, and other places requiring vertical layout.
<!-- Form fields vertical layout -->
<form class="df fdc gap12px">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<textarea placeholder="Message"></textarea>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Submit</button>
</form>
<!-- Card internal structure -->
<div class="df fdc gap16px p2rem bg18181B br8px">
<h3>Card Title</h3>
<p>Card description text goes here.</p>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Details</button>
</div>Common Combinations
df fdc gap8px | Vertical + gap (forms, lists) |
df fdc jcc aic h100vh | Full screen center alignment |
df fdc jcsb h100p | Vertical space between (top + bottom fixed) |
df fdc fg1 | Area that fills remaining vertical space |
fdcrflex-direction: column-reverse
Arranges items from bottom to top. Used for chat message-style UIs where the latest item is at the bottom while scrolling extends upward, or for reverse-order lists.
<!-- Chat messages (newest at bottom) -->
<div class="df fdcr gap8px maxh30rem oya p16px">
<div class="bg18181B p12px br8px fs14px cA1A1AA">First Message</div>
<div class="bg18181B p12px br8px fs14px cA1A1AA">Second Message</div>
<div class="bg6366F1 p12px br8px fs14px cFFFFFF">Newest message (bottom of screen)</div>
</div>
<!-- Reverse notification list -->
<div class="df fdcr gap4px">
<p class="fs14px c71717A">Old notification</p>
<p class="fs14px c71717A">Middle notification</p>
<p class="fs14px cFAFAFA fw600">Latest notification</p>
</div>Accessibility note
fdcr, like fdrr, only reverses visual order; DOM order and tab order remain unchanged.
Responsive Patterns
Combined with media query prefixes, you can switch direction based on screen size.
<!-- Desktop horizontal → tablet vertical -->
<div class="df fdr md-fdc gap2rem">
<div class="fg1 bg18181B p2rem br8px">Sidebar</div>
<div class="fg1 bg27272A p2rem br8px">Main Content</div>
</div>
<!-- Mobile vertical → desktop horizontal -->
<div class="df fdc sm-fdr gap16px">
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Button 1</button>
<button class="py8px px16px bg27272A cFFFFFF br8px bn cp">Button 2</button>
<button class="py8px px16px bg27272A cFFFFFF br8px bn cp">Button 3</button>
</div>| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class Combination | Behavior |
|---|---|
df fdr md-fdc | Default horizontal, switches to vertical at 1024px and below |
df fdc sm-fdr | Default vertical, switches to horizontal at 768px and below |
df fdr sm-fdc gap16px | Default horizontal, vertical + gap maintained at 768px and below |
df fdc md-fdr lg-fdrr | Default vertical, tablet horizontal, desktop reverse horizontal |
Tips & Notes
fdc changes the main axis
When using fdc, the main axis becomes vertical. Therefore jcc(justify-content: center) becomes vertical centering, and aic(align-items: center) becomes horizontal centering.
Use with gap
Using flex-direction with gap makes it easy to add consistent spacing between items. Example: df fdc gap16px
reverse only changes visual order
fdrr and fdcr do not change DOM order or tab order. Screen readers and keyboard navigation still follow the original DOM order, so be mindful of accessibility.