LEGACY Tailwind CSS v3-era example, archived unchanged. Kept for reference only — it uses the v3 Play CDN and JS config, both removed in v4. Current documentation →
Back to Main Documentation Official Docs

Tailwind CSS Flexbox

Master the power of flexible layouts with Tailwind's utility-first flexbox approach

What is Tailwind CSS Flexbox?

Flexbox in Tailwind CSS provides a powerful system for creating dynamic layouts that adapt to different screen sizes. It offers intuitive ways to align, distribute, and order elements without complex CSS.

Tailwind's flexbox utilities make it easy to build everything from simple centered components to sophisticated responsive page layouts with just a few classes.

Quick Reference

  • flex Display as flex container
  • flex-{direction} Set flex direction
  • justify-{position} Horizontal alignment

Flexbox Core Concepts

Flex Container

Start by adding flex to create a flex container. This enables all flexbox features for that element's children.

Item 1
Item 2
Item 3
A simple flex container with flex gap-3

Flex Direction

Control the direction of flex items with flex-{direction} utilities.

Item 1
Item 2
Item 3
Vertical column with flex flex-col gap-3

Horizontal Alignment

Align items horizontally with justify-{position} utilities.

Left
Center
Right
Spaced between with justify-between

Vertical Alignment

Align items vertically with items-{position} utilities.

Item 1
Item 2
Item 3
Centered vertically with items-center

Grow & Shrink Behavior

Control how flex items grow and shrink with flex-{value} utilities.

flex-none
flex-initial
flex-1
flex-auto
Different growth behaviors with various flex utilities

Use Cases

  • Navigation Bars - Create responsive navigation with flex layout
  • Card Layouts - Design flexible card grids that adapt to content
  • Form Elements - Align form inputs and labels consistently
  • Content Distribution - Evenly space elements across a container
  • Responsive Layouts - Build layouts that adapt to different screen sizes

Flexbox Properties & Examples

Justify Content Properties

Control how items are positioned along the main axis:

justify-start
1
2
3

Items aligned to the start

justify-end
1
2
3

Items aligned to the end

justify-center
1
2
3

Items centered

justify-between
1
2
3

Space between items

justify-around
1
2
3

Equal space around items

justify-evenly
1
2
3

Equal space between items

Justify Content Syntax 

justify-start      justify-content: flex-start;
justify-end        justify-content: flex-end;
justify-center     justify-content: center;
justify-between    justify-content: space-between;
justify-around     justify-content: space-around;
justify-evenly     justify-content: space-evenly;

Align Items Properties

Control how items are positioned along the cross axis:

items-start
1
2
3

Items aligned to the start of cross axis

items-end
1
2
3

Items aligned to the end of cross axis

items-center
1
2
3

Items centered on cross axis

items-baseline
Small
Medium
Large

Items aligned by their baselines

items-stretch
1
2
3

Items stretched to fill container height

Align Items Syntax 

items-start     align-items: flex-start;
items-end       align-items: flex-end;
items-center    align-items: center;
items-baseline  align-items: baseline;
items-stretch   align-items: stretch;

Flex Wrap Properties

Control whether flex items are forced onto a single line or can wrap onto multiple lines:

flex-wrap
Item 1
Item 2
Item 3
Item 4
Item 5

Items wrap to next line when needed

flex-wrap-reverse
Item 1
Item 2
Item 3
Item 4
Item 5

Items wrap in reverse direction

flex-nowrap
Item 1
Item 2
Item 3
Item 4
Item 5

Items forced into a single line (may overflow)

Flex Wrap Syntax 

flex-wrap         flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap       flex-wrap: nowrap;

Flex Item Properties

Control how flex items grow and shrink:

flex-none
flex-none
Other content

Prevent item from growing or shrinking (flex: none;)

flex-initial
flex-initial
Other content

Allow item to shrink but not grow (flex: 0 1 auto;)

flex-auto
flex-auto
flex-auto

Allow item to grow and shrink, considering initial size (flex: 1 1 auto;)

flex-1
flex-1
flex-1 (wider)

Grow and shrink as needed, ignoring initial size (flex: 1 1 0%;)

Flex Item Property Syntax 

flex-none     flex: none;     
flex-initial  flex: 0 1 auto; 
flex-auto     flex: 1 1 auto; 
flex-1        flex: 1 1 0%;

Pro Tip

When building responsive layouts, combine flex utilities with responsive prefixes like md:flex-row to create layouts that change based on screen size. For example, flex flex-col md:flex-row creates a column layout on mobile that becomes a row layout on medium-sized screens and larger.

Summary & Key Takeaways

What We've Learned

  • Flexbox provides a powerful and intuitive way to create layouts in Tailwind CSS
  • Utilities like justify-content and align-items give fine-grained control over alignment
  • Flex direction and wrap properties help create both simple and complex layouts
  • Item-specific properties like flex-1 and flex-auto control how elements grow and shrink

Next Steps

  • Combine flexbox with Tailwind's Grid system for even more layout possibilities
  • Practice building responsive layouts with flex and responsive prefixes
  • Experiment with nested flex containers for complex component design
  • Check out the official Tailwind CSS documentation for more details
Back to Main Documentation

Interactive Examples

Flex and Alignment

Flex container with items centered and some individual item alignment:

01
02
03
04

Code:

<div class="flex flex-wrap h-72 w-100 bg-gray-100 justify-around items-center">
  <div class="p-10 border border-blue-600 bg-blue-100">01</div>
  <div class="p-10 border border-blue-600 bg-blue-100">02</div>
  <div class="self-start p-10 border border-blue-600 bg-blue-100">03</div>
  <div class="self-end p-10 border border-blue-600 bg-blue-100">04</div>
</div>

Flex Column with Gap and Order

Vertical column with gap spacing and reordered items:

01
02
03
04

Code:

<div class="flex flex-col gap-4 w-100 bg-gray-200 justify-around items-center">
  <div class="order-4 p-10 border border-blue-600 bg-blue-100">01</div>
  <div class="order-1 p-10 border border-blue-600 bg-blue-100">02</div>
  <div class="p-10 border border-blue-600 bg-blue-100">03</div>
  <div class="p-10 border border-blue-600 bg-blue-100">04</div>
</div>

Flex Grow and Shrink

Demonstration of different flex item growth behaviors:

01 (flex-none)
02 (flex-initial)
03 (flex-auto)
04 (flex-1)
05
06
07

Code:

<div class="flex w-100 bg-gray-300">
  <!-- flex-none: Prevent item from growing or shrinking -->
  <div class="w-64 flex-none p-10 border border-blue-600 bg-blue-100">
    01
  </div>
  <!-- flex-initial: Allow item to shrink but not grow -->
  <div class="w-64 flex-initial p-10 border border-blue-600 bg-blue-100">
    02
  </div>
  <!-- flex-auto: Allow item to grow and shrink, taking into account its initial size -->
  <div class="w-64 flex-auto p-10 border border-blue-600 bg-blue-100">
    03
  </div>
  <!-- flex-1: Allow item to grow and shrink as needed, ignoring its initial size -->
  <div class="w-64 flex-1 p-10 border border-blue-600 bg-blue-100">04</div>
  <div class="p-10 border border-blue-600 bg-blue-100">05</div>
  <div class="p-10 border border-blue-600 bg-blue-100">06</div>
  <div class="p-10 border border-blue-600 bg-blue-100">07</div>
</div>