Skip to main content

Flexbox Patterns

53 visual flexbox patterns with live demos, code, and detailed property descriptions.

Click "Properties Used" on any pattern to see what CSS properties and Tailwind classes make it work.

Alignment & Centering

6 patternsBack to top

Center Both Axes

Center a child element both horizontally and vertically within its parent.

<div class="flex items-center justify-center h-48">
  <div class="w-24 h-24 bg-blue-500 rounded" />
</div>

Center Horizontally Only

Center items along the main axis while leaving the cross axis at default (stretch).

Centered
<div class="flex justify-center h-32">
  <div class="w-24 bg-blue-400 rounded">Centered</div>
</div>

Center Vertically Only

Center items along the cross axis while leaving horizontal alignment at default.

Centered
<div class="flex items-center h-32">
  <div class="w-24 bg-green-400 rounded p-2">Centered</div>
</div>

Align Items to Baseline

Align items so their text baselines line up, regardless of different font sizes or padding.

Big
Small
Medium
<div class="flex items-baseline gap-4 p-4">
  <div class="text-3xl bg-yellow-100 p-2">Big</div>
  <div class="text-sm bg-yellow-200 p-4">Small</div>
  <div class="text-xl bg-yellow-300 p-1">Medium</div>
</div>

Align-Self Override

Override the container's align-items for individual children using align-self.

Start
Center (default)
End
<div class="flex items-center h-32 gap-4">
  <div class="self-start bg-pink-200 p-2">Start</div>
  <div class="bg-pink-300 p-2">Center (default)</div>
  <div class="self-end bg-pink-400 p-2">End</div>
</div>

Distribute Items Evenly

Space items with equal gaps between and around them, including at the edges.

A
B
C
<div class="flex justify-evenly p-4">
  <div class="bg-indigo-200 p-3 rounded">A</div>
  <div class="bg-indigo-300 p-3 rounded">B</div>
  <div class="bg-indigo-400 p-3 rounded">C</div>
</div>

Direction & Order

5 patternsBack to top

Default Row

Flex items lay out in a horizontal row by default, left to right.

One
Two
Three
<div class="flex gap-4">
  <div class="bg-sky-200 p-3 rounded">One</div>
  <div class="bg-sky-300 p-3 rounded">Two</div>
  <div class="bg-sky-400 p-3 rounded">Three</div>
</div>

Row Reverse

Reverse the visual order of items without changing the DOM order.

First in DOM
Second
Third
<div class="flex flex-row-reverse gap-4">
  <div class="bg-orange-200 p-3 rounded">First in DOM</div>
  <div class="bg-orange-300 p-3 rounded">Second</div>
  <div class="bg-orange-400 p-3 rounded">Third</div>
</div>

Column

Stack items vertically from top to bottom.

Top
Middle
Bottom
<div class="flex flex-col gap-3">
  <div class="bg-emerald-200 p-3 rounded">Top</div>
  <div class="bg-emerald-300 p-3 rounded">Middle</div>
  <div class="bg-emerald-400 p-3 rounded">Bottom</div>
</div>

Column Reverse

Stack items from bottom to top, reversing the visual order.

First in DOM (appears last)
Second
Third (appears first)
<div class="flex flex-col-reverse gap-3">
  <div class="bg-rose-200 p-3 rounded">First in DOM</div>
  <div class="bg-rose-300 p-3 rounded">Second</div>
  <div class="bg-rose-400 p-3 rounded">Third</div>
</div>

Custom Order

Reorder specific items visually without changing the HTML structure.

A (order-last)
B (default)
C (order-first)
<div class="flex gap-4">
  <div class="order-last bg-violet-200 p-3">A (order-last)</div>
  <div class="bg-violet-300 p-3">B (default)</div>
  <div class="order-first bg-violet-400 p-3">C (order-first)</div>
</div>

Spacing & Distribution

6 patternsBack to top

Space Between

Push items to opposite ends of the container with no space at the edges.

Left
Right
<div class="flex justify-between p-4">
  <div class="bg-blue-200 px-4 py-2 rounded">Left</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Right</div>
</div>

Space Around

Items get equal space on both sides, resulting in half-space at the edges.

A
B
C
<div class="flex justify-around p-4">
  <div class="bg-teal-200 p-3 rounded">A</div>
  <div class="bg-teal-300 p-3 rounded">B</div>
  <div class="bg-teal-400 p-3 rounded">C</div>
</div>

Space Evenly

Equal space between all items and at both edges — the most balanced distribution.

A
B
C
<div class="flex justify-evenly p-4">
  <div class="bg-amber-200 p-3 rounded">A</div>
  <div class="bg-amber-300 p-3 rounded">B</div>
  <div class="bg-amber-400 p-3 rounded">C</div>
</div>

Row and Column Gap

Use different gap sizes for horizontal and vertical spacing.

Wide gap-x
Between
Columns
Narrow gap-y
Between
Rows
<div class="flex flex-wrap gap-x-8 gap-y-2">
  <div class="bg-cyan-200 px-4 py-2 rounded">Wide gap-x</div>
  <div class="bg-cyan-300 px-4 py-2 rounded">Between</div>
  <div class="bg-cyan-400 px-4 py-2 rounded">Columns</div>
  <div class="bg-cyan-200 px-4 py-2 rounded">Narrow gap-y</div>
  <div class="bg-cyan-300 px-4 py-2 rounded">Between</div>
  <div class="bg-cyan-400 px-4 py-2 rounded">Rows</div>
</div>

Auto Margins

Use margin-left: auto to push an item to the far right — a powerful flex trick.

Home
About
Login
<div class="flex gap-4 p-4">
  <div class="bg-lime-200 p-3 rounded">Home</div>
  <div class="bg-lime-300 p-3 rounded">About</div>
  <div class="ml-auto bg-lime-400 p-3 rounded">Login</div>
</div>

Vertical Stack with Gap

Stack items vertically with consistent spacing using flex-col and gap.

Item 1
Item 2
Item 3
<div class="flex flex-col gap-3">
  <div class="p-3 bg-purple-100 rounded">Item 1</div>
  <div class="p-3 bg-purple-200 rounded">Item 2</div>
  <div class="p-3 bg-purple-300 rounded">Item 3</div>
</div>

Wrapping

4 patternsBack to top

Flex Wrap

Allow items to wrap to the next line when they exceed the container width.

Item 1
Item 2
Item 3
Item 4
<div class="flex flex-wrap gap-3" style="max-width: 300px">
  <div class="w-32 bg-sky-200 p-3 rounded">Item 1</div>
  <div class="w-32 bg-sky-300 p-3 rounded">Item 2</div>
  <div class="w-32 bg-sky-400 p-3 rounded">Item 3</div>
  <div class="w-32 bg-sky-500 p-3 rounded text-white">Item 4</div>
</div>

Wrap Reverse

Items wrap upward instead of downward — the last row appears at the top.

Item 1
Item 2
Item 3
Item 4
<div class="flex flex-wrap-reverse gap-3" style="max-width: 300px">
  <div class="w-32 bg-rose-200 p-3 rounded">Item 1</div>
  <div class="w-32 bg-rose-300 p-3 rounded">Item 2</div>
  <div class="w-32 bg-rose-400 p-3 rounded">Item 3</div>
  <div class="w-32 bg-rose-500 p-3 rounded text-white">Item 4</div>
</div>

No Wrap with Truncation

Keep all items on one line and truncate text that overflows.

Very long text that will be truncated with an ellipsis
Fixed
<div class="flex gap-3" style="max-width: 280px">
  <div class="min-w-0 flex-1 bg-gray-200 p-3 rounded">
    <div class="truncate">Very long text that will be
      truncated with an ellipsis</div>
  </div>
  <div class="shrink-0 bg-gray-300 p-3 rounded">Fixed</div>
</div>

Wrapping Tag / Chip List

A collection of tags or chips that wrap naturally to fill available space.

ReactTypeScriptTailwindDocusaurusFlexboxCSSNode.jsGraphQL
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 text-blue-800
    rounded-full text-sm">React</span>
  <span class="px-3 py-1 bg-green-100 text-green-800
    rounded-full text-sm">TypeScript</span>
  <span class="px-3 py-1 bg-purple-100 text-purple-800
    rounded-full text-sm">Tailwind</span>
  <!-- ...more tags -->
</div>

Sizing & Growth

5 patternsBack to top

Equal-Width Columns

Make all children take up equal amounts of space, regardless of content.

Short
Medium length content
Short
<div class="flex gap-4">
  <div class="flex-1 bg-blue-200 p-4 rounded">Short</div>
  <div class="flex-1 bg-blue-300 p-4 rounded">
    Medium length content
  </div>
  <div class="flex-1 bg-blue-400 p-4 rounded">Short</div>
</div>

Fixed + Flexible

A fixed-width element next to one that fills the remaining space.

Fixed 128px
Fills remaining space
<div class="flex gap-4">
  <div class="shrink-0 w-32 bg-red-200 p-3 rounded">
    Fixed 128px
  </div>
  <div class="flex-1 bg-red-100 p-3 rounded">
    Fills remaining space
  </div>
</div>

Equal-Height Columns

Columns automatically stretch to match the tallest sibling.

Short
Tall content
Line 2
Line 3
Line 4
Medium
Line 2
<div class="flex gap-4">
  <div class="flex-1 bg-green-100 p-4 rounded">
    Short
  </div>
  <div class="flex-1 bg-green-200 p-4 rounded">
    Tall content<br/>Line 2<br/>Line 3<br/>Line 4
  </div>
  <div class="flex-1 bg-green-300 p-4 rounded">
    Medium<br/>Line 2
  </div>
</div>

Grow Ratios

Control how items share available space using different flex-grow values.

1x
2x
1x
<div class="flex gap-4">
  <div class="grow bg-amber-200 p-3 rounded">1x</div>
  <div class="grow-[2] bg-amber-300 p-3 rounded">2x</div>
  <div class="grow bg-amber-400 p-3 rounded">1x</div>
</div>

Flex Basis

Set the initial size of items before flex-grow and flex-shrink are applied.

1/3 width
2/3 width
<div class="flex gap-4">
  <div class="basis-1/3 bg-violet-200 p-3 rounded">
    1/3 width
  </div>
  <div class="basis-2/3 bg-violet-300 p-3 rounded">
    2/3 width
  </div>
</div>

Page Layouts

5 patternsBack to top

Sidebar Layout

A fixed-width sidebar alongside a flexible main content area.

Main Content
<div class="flex h-64">
  <aside class="shrink-0 w-48 bg-gray-200 p-4">
    Sidebar
  </aside>
  <main class="flex-1 p-4">
    Main Content
  </main>
</div>

Holy Grail Layout

The classic layout: header, three-column body (nav, main, aside), and footer.

Header
Main
Footer
<div class="flex flex-col h-64">
  <header class="bg-gray-800 text-white p-3">
    Header
  </header>
  <div class="flex flex-1">
    <nav class="w-32 bg-gray-200 p-3">Nav</nav>
    <main class="flex-1 p-3">Main</main>
    <aside class="w-32 bg-gray-200 p-3">Aside</aside>
  </div>
  <footer class="bg-gray-800 text-white p-3">
    Footer
  </footer>
</div>

Sticky Footer Page

Content pushes the footer to the bottom, even when content is short.

Header
Short content — footer still at bottom
Footer
<div class="flex flex-col min-h-screen">
  <header class="bg-gray-800 text-white p-4">
    Header
  </header>
  <main class="flex-1 p-4">
    Short content — footer still at bottom
  </main>
  <footer class="bg-gray-800 text-white p-4">
    Footer
  </footer>
</div>

Dashboard Layout

Full-height sidebar with a top header bar and main content area.

Top bar
Dashboard content
<div class="flex h-screen">
  <aside class="shrink-0 w-48 bg-gray-900 text-white
    p-4">Sidebar</aside>
  <div class="flex flex-col flex-1">
    <header class="shrink-0 bg-white border-b p-4">
      Top bar
    </header>
    <main class="flex-1 p-4 bg-gray-50 overflow-auto">
      Dashboard content
    </main>
  </div>
</div>

Split Screen 50/50

Two equal-width panes side by side, each filling half the screen.

Left Pane
Right Pane
<div class="flex h-64">
  <div class="flex-1 bg-blue-600 text-white
    flex items-center justify-center">
    Left Pane
  </div>
  <div class="flex-1 bg-gray-100
    flex items-center justify-center">
    Right Pane
  </div>
</div>

Cards & Content

6 patternsBack to top

Card with Bottom Action

A card where the action button always sits at the bottom, regardless of content height.

Card Title

Card content of varying length goes here.

<div class="flex flex-col h-64 p-4 border rounded">
  <h3 class="font-bold mb-2">Card Title</h3>
  <p class="flex-1">Card content of varying length
    goes here.</p>
  <button class="mt-4 px-4 py-2 bg-blue-500
    text-white rounded">Action</button>
</div>

Horizontal Card

Image on the left, text content on the right — a common card variation.

Article Title

A brief description of this article that might be quite long...

<div class="flex border rounded overflow-hidden">
  <div class="shrink-0 w-32 h-32 bg-gray-300" />
  <div class="min-w-0 p-4">
    <h3 class="font-bold">Title</h3>
    <p class="text-sm text-gray-600 truncate">
      Long description text here...</p>
  </div>
</div>

Card Row

Multiple equal-width cards displayed in a horizontal row.

Card 1

Short text

Card 2

Longer description text that takes up more room

Card 3

Medium text here

<div class="flex gap-4">
  <div class="flex-1 flex flex-col p-4
    border rounded">
    <h3 class="font-bold">Card 1</h3>
    <p class="flex-1 text-sm">Short text</p>
    <button class="mt-3 bg-blue-500 text-white
      rounded py-2">Go</button>
  </div>
  <div class="flex-1 flex flex-col p-4
    border rounded">
    <h3 class="font-bold">Card 2</h3>
    <p class="flex-1 text-sm">Longer text pushes
      other cards</p>
    <button class="mt-3 bg-blue-500 text-white
      rounded py-2">Go</button>
  </div>
</div>

Pricing Card

A tall card with price, feature list, and CTA button pinned at the bottom.

Pro

$29/mo
  • 10 Projects
  • Priority Support
  • API Access
<div class="flex flex-col items-center p-6
  border rounded h-72">
  <h3 class="text-xl font-bold">Pro</h3>
  <div class="text-3xl font-bold my-3">$29/mo</div>
  <ul class="text-sm text-gray-600 space-y-2">
    <li>10 Projects</li>
    <li>Priority Support</li>
    <li>API Access</li>
  </ul>
  <button class="mt-auto w-full py-2 bg-blue-500
    text-white rounded">Choose Plan</button>
</div>

Testimonial Card

Avatar, quote, and attribution arranged in a centered vertical layout.

"This product changed the way I work."

— Jane Smith
<div class="flex flex-col items-center p-6
  border rounded gap-4">
  <div class="w-16 h-16 bg-gray-300
    rounded-full" />
  <p class="text-center text-gray-600 italic">
    "This product changed the way I work."
  </p>
  <div class="font-semibold">— Jane Smith</div>
</div>

Feature Block

Icon alongside a heading and description — common in feature sections.

⚡

Fast Performance

Our optimized engine delivers results in milliseconds, not seconds.

<div class="flex items-start gap-4">
  <div class="shrink-0 w-12 h-12 bg-blue-500
    rounded-lg flex items-center justify-center
    text-white text-xl">⚡</div>
  <div>
    <h3 class="font-bold">Fast Performance</h3>
    <p class="text-sm text-gray-600">
      Our optimized engine delivers results in
      milliseconds, not seconds.
    </p>
  </div>
</div>

Media & Lists

7 patternsBack to top

Song / Track Row

Album art, track name, artist, album, and duration — like a music player list.

Bohemian Rhapsody
Queen — A Night at the Opera
5:55
<div class="flex items-center gap-3 p-3
  hover:bg-gray-50 rounded">
  <div class="shrink-0 w-10 h-10 bg-gray-300
    rounded" />
  <div class="min-w-0 flex-1">
    <div class="font-medium truncate">
      Track Name Here</div>
    <div class="text-sm text-gray-500 truncate">
      Artist Name — Album Title</div>
  </div>
  <div class="shrink-0 text-sm text-gray-500">
    3:42</div>
</div>

Playlist

Multiple song rows stacked vertically with dividers — a complete list view.

1
Bohemian Rhapsody
Queen
5:55
2
Hotel California
Eagles
6:30
3
Stairway to Heaven
Led Zeppelin
8:02
4
Imagine
John Lennon
3:07
<div class="flex flex-col divide-y border rounded">
  <!-- Repeat for each track -->
  <div class="flex items-center gap-3 p-3">
    <span class="text-sm text-gray-400 w-6">1</span>
    <div class="shrink-0 w-10 h-10
      bg-gray-300 rounded" />
    <div class="min-w-0 flex-1">
      <div class="font-medium truncate">Track</div>
      <div class="text-sm text-gray-500">Artist</div>
    </div>
    <div class="text-sm text-gray-500">3:42</div>
  </div>
</div>

User Row

Avatar, user name, role, and a status badge — common in admin interfaces.

Jane Smith
Engineer
Active
<div class="flex items-center gap-3 p-3">
  <div class="w-10 h-10 bg-blue-500
    rounded-full" />
  <div>
    <div class="font-medium">Jane Smith</div>
    <div class="text-sm text-gray-500">Engineer</div>
  </div>
  <span class="ml-auto px-2 py-1 bg-green-100
    text-green-800 rounded-full text-xs">Active</span>
</div>

Comment Thread

Avatar alongside commenter name, timestamp, and the comment body.

Alex Johnson2h ago

Great explanation of the flex properties! The min-w-0 trick is something I always forget.

<div class="flex items-start gap-3 p-3">
  <div class="shrink-0 w-8 h-8 bg-gray-300
    rounded-full" />
  <div class="flex flex-col gap-1">
    <div class="flex items-center gap-2">
      <span class="font-medium text-sm">User</span>
      <span class="text-xs text-gray-400">2h ago</span>
    </div>
    <p class="text-sm text-gray-700">
      The comment text goes here...</p>
  </div>
</div>

File List Item

File icon, filename, size, and action buttons in a single row.

📄
very-long-filename-report-2024.pdf
2.4 MB
<div class="flex items-center gap-3 p-3
  border rounded">
  <span class="shrink-0 text-2xl">📄</span>
  <div class="min-w-0 flex-1">
    <div class="font-medium truncate text-sm">
      very-long-filename-report-2024.pdf</div>
    <div class="text-xs text-gray-500">2.4 MB</div>
  </div>
  <div class="shrink-0 flex gap-2">
    <button class="px-2 py-1 text-xs border
      rounded">Download</button>
    <button class="px-2 py-1 text-xs border
      rounded text-red-500">Delete</button>
  </div>
</div>

Product Row

Product image, name, price, and an add-to-cart button — e-commerce list item.

Wireless Bluetooth Headphones
Electronics
$29.99
<div class="flex items-center gap-4 p-3
  border rounded">
  <div class="shrink-0 w-16 h-16 bg-gray-200
    rounded" />
  <div class="min-w-0 flex-1">
    <div class="font-medium truncate">
      Product Name</div>
    <div class="text-sm text-gray-500">
      Category</div>
  </div>
  <div class="shrink-0 text-right">
    <div class="font-bold">$29.99</div>
    <button class="mt-1 px-3 py-1 bg-blue-500
      text-white rounded text-sm">Add</button>
  </div>
</div>

Notification Item

Icon, notification text, timestamp, and a dismiss button.

ℹ️

Your report is ready to download.

5 min ago
<div class="flex items-start gap-3 p-3
  border-l-4 border-blue-500 bg-blue-50 rounded-r">
  <span class="shrink-0 mt-0.5">ℹ️</span>
  <div class="flex-1">
    <p class="text-sm">Your report is ready to
      download.</p>
    <span class="text-xs text-gray-500">
      5 min ago</span>
  </div>
  <button class="shrink-0 text-gray-400
    hover:text-gray-600">✕</button>
</div>

Forms & Inputs

3 patternsBack to top

Input with Button

A text input that fills available space next to a fixed-width submit button.

<div class="flex gap-2">
  <input class="flex-1 border rounded px-3 py-2"
    placeholder="Enter text..." />
  <button class="px-4 py-2 bg-blue-500
    text-white rounded">Submit</button>
</div>

Search Bar with Icon

A search input with an icon inside it and a search button — common in headers.

🔍
<div class="flex gap-2">
  <div class="relative flex-1">
    <span class="absolute left-3 top-1/2
      -translate-y-1/2 text-gray-400">🔍</span>
    <input class="w-full border rounded pl-10
      pr-3 py-2" placeholder="Search..." />
  </div>
  <button class="px-4 py-2 bg-blue-500
    text-white rounded">Search</button>
</div>

Inline Form Row

Label, input, and helper text arranged horizontally in a single row.

3-20 chars
<div class="flex items-center gap-4">
  <label class="shrink-0 font-medium text-sm
    w-24">Username</label>
  <input class="flex-1 border rounded px-3 py-2" />
  <span class="shrink-0 text-xs text-gray-500">
    3-20 characters</span>
</div>