Skip to main content

​
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

Flex Direction

.flex-rowRowflex-direction: row;Horizontal layout
.flex-colColumnflex-direction: column;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>

​
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

Alignment

Align items with justify-content and align-items

Gap

Spacing between flex items

Flexbox Overview

Complete flexbox system overview