Flexbox Direction

Control flex direction with .flex-row and .flex-col utilities

Interactive Demo

Overview

Control the direction of flex items with direction utilities. Flex direction determines whether items are laid out horizontally (row) or vertically (column).

Flex Direction Utilities

Class	Direction	CSS	Usage
.flex-row	Row	flex-direction: row;	Horizontal layout
.flex-col	Column	flex-direction: column;	Vertical layout
.flex-row-reverse	Row reverse	flex-direction: row-reverse;	Reverse horizontal layout
.flex-col-reverse	Column reverse	flex-direction: column-reverse;	Reverse vertical layout

Examples

Row Layout

<!-- Horizontal flex layout -->
<div class="flex flex-row gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-blue text-white">Item 2</div>
  <div class="p-4 bg-blue text-white">Item 3</div>
</div>

Column Layout

<!-- Vertical flex layout -->
<div class="flex flex-col gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-blue text-white">Item 2</div>
  <div class="p-4 bg-blue text-white">Item 3</div>
</div>

Common Patterns

Header Layout

<header class="flex flex-row items-center justify-between p-6 bg-white">
  <h1 class="text-2xl font-700">Logo</h1>
  <nav class="flex flex-row gap-6">
    <a href="#" class="text-gray">Home</a>
    <a href="#" class="text-gray">About</a>
  </nav>
</header>

Form Layout

<form class="flex flex-col gap-4">
  <input type="text" class="p-3 border border-gray rounded" placeholder="Name">
  <input type="email" class="p-3 border border-gray rounded" placeholder="Email">
  <button class="btn btn-blue">Submit</button>
</form>

Card Stack

<div class="flex flex-col gap-6">
  <div class="card p-6">Card 1</div>
  <div class="card p-6">Card 2</div>
  <div class="card p-6">Card 3</div>
</div>

Reverse Layout

<!-- Reverse row layout -->
<div class="flex flex-row-reverse gap-4">
  <div class="p-4 bg-blue text-white">Item 1 (appears last)</div>
  <div class="p-4 bg-blue text-white">Item 2</div>
  <div class="p-4 bg-blue text-white">Item 3 (appears first)</div>
</div>

<!-- Reverse column layout -->
<div class="flex flex-col-reverse gap-4">
  <div class="p-4 bg-green text-white">Item 1 (appears at bottom)</div>
  <div class="p-4 bg-green text-white">Item 2</div>
  <div class="p-4 bg-green text-white">Item 3 (appears at top)</div>
</div>

Best Practices

• Default is row: Flex containers default to row direction
• Use column for forms: Stack form fields vertically with flex-col
• Combine with wrap: Use flex-wrap with row for responsive grids
• Nest directions: Use different directions for nested flex containers

Related Utilities

Wrap

Control flex wrapping

Alignment

Align items with justify-content and align-items

Gap

Spacing between flex items

Flexbox Overview

Complete flexbox system overview