Flexbox Guide

Flexbox in Tailwind CSS

Flexbox is a powerful one-dimensional layout system ideal for arranging items in rows or columns with precise alignment and distribution controls.

Understanding Flexbox Axes

Flexbox operates on two axes: the main axis and the cross axis. These axes determine how items are positioned and aligned.

Direction: Row (Default)

In row direction, the main axis runs horizontally (left to right) and the cross axis runs vertically.

Main Axis
Cross Axis
1
2
3
justify-content

Controls alignment along the main axis (how items are positioned from start to end)

align-items

Controls alignment along the cross axis (how items are positioned perpendicular to the main axis)

Display and Direction

Control how elements are displayed and the direction of your flex container.

Quick Explanation

Flexbox lets you arrange items in a row or column. You can even reverse the order! Think of it like organizing toys in a line - you can place them left-to-right, right-to-left, top-to-bottom, or bottom-to-top.

Flex (Default Row Direction)

Items are arranged horizontally from left to right by default.

Demo

1
2
3

Code

<div className="flexThis activates Flexbox layout with default row direction">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Row Reverse

Items are arranged horizontally from right to left.

Demo

1
2
3

Code

<div className="flex flex-row-reverseReverses the order of items in the row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Column

Items are arranged vertically from top to bottom.

Demo

1
2
3

Code

<div className="flex flex-colArranges items in a column (vertical) direction">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Column Reverse

Items are arranged vertically from bottom to top.

Demo

1
2
3

Code

<div className="flex flex-col-reverseArranges items in a column with reversed order (bottom to top)">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Content

Align items along the main axis (horizontal in row, vertical in column).

Quick Explanation

Justification controls how items are positioned along the main axis. Think of it like arranging books on a shelf - you can push them all to the left, center them, push them to the right, or space them evenly.

Justify Start

Items are positioned at the start of the container (left edge in LTR languages).

Demo

1
2
3

Code

<div className="flex justify-startAligns items at the beginning of the container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Center

Items are centered along the main axis.

Demo

1
2
3

Code

<div className="flex justify-centerCenters items horizontally in a row layout">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify End

Items are positioned at the end of the container (right edge in LTR languages).

Demo

1
2
3

Code

<div className="flex justify-endAligns items at the end of the container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Between

Items are evenly distributed with the first item at the start and the last item at the end.

Demo

1
2
3

Code

<div className="flex justify-betweenCreates equal space between items, with no space at edges">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Around

Items are evenly distributed with equal space around them.

Demo

1
2
3

Code

<div className="flex justify-aroundCreates equal space around each item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Evenly

Items are evenly distributed with equal space between them.

Demo

1
2
3

Code

<div className="flex justify-evenlyCreates perfectly even spacing between items and at the edges">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Align Items

Align items along the cross axis (vertical in row, horizontal in column).

Quick Explanation

Alignment controls how items are positioned along the cross axis. Imagine hanging pictures on a wall - you can align them at the top, center them vertically, or align them at the bottom.

Items Start

Items are aligned at the start of the cross axis (top in row layout).

Demo

Short
Medium
Tall

Code

<div className="flex items-startAligns items at the top in a row layout">
  <div className="h-16">Short</div>
  <div className="h-24">Medium</div>
  <div className="h-32">Tall</div>
</div>

Items Center

Items are centered along the cross axis.

Demo

Short
Medium
Tall

Code

<div className="flex items-centerCenters items vertically in a row layout">
  <div className="h-16">Short</div>
  <div className="h-24">Medium</div>
  <div className="h-32">Tall</div>
</div>

Items End

Items are aligned at the end of the cross axis (bottom in row layout).

Demo

Short
Medium
Tall

Code

<div className="flex items-endAligns items at the bottom in a row layout">
  <div className="h-16">Short</div>
  <div className="h-24">Medium</div>
  <div className="h-32">Tall</div>
</div>

Items Stretch

Items are stretched to fill the container along the cross axis.

Demo

Auto
Auto
Auto

Code

<div className="flex items-stretchStretches items to fill the container height h-32">
  <div>Auto height</div>
  <div>Auto height</div>
  <div>Auto height</div>
</div>

Flex Wrap

Control whether items can wrap to multiple lines or are forced onto a single line.

Quick Explanation

Flex wrap determines whether items stay in a single line or wrap to new lines when they run out of space. Think of it like text - sometimes you want it all on one line, and sometimes you want it to wrap to fit its container.

Flex No Wrap (Default)

All items are forced onto a single line, which may cause overflow.

Demo

1
2
3
4
5
6
7
8

Code

<div className="flex flex-nowrapForces all items to stay on a single line (default behavior)">
  <!-- All items will stay on a single line -->
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- And so on -->
</div>

Flex Wrap

Items wrap to multiple lines if needed.

Demo

1
2
3
4
5
6
7
8

Code

<div className="flex flex-wrapAllows items to wrap to multiple lines when needed">
  <!-- Items will wrap to new lines as needed -->
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- And so on -->
</div>

Flex Wrap Reverse

Items wrap to multiple lines in reverse order.

Demo

1
2
3
4
5
6
7
8

Code

<div className="flex flex-wrap-reverseWraps items to multiple lines but in reverse order (bottom to top)">
  <!-- Items will wrap to new lines in reverse order -->
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- And so on -->
</div>

Flex Grow & Shrink

Control how flex items grow and shrink to fill the available space.

Quick Explanation

Flex grow and shrink control how items resize when there's extra space or not enough space. It's like sharing a pizza - some people might get bigger slices (grow more) while others get smaller slices.

Flex Grow

Controls how much an item can grow relative to other items.

Demo

grow-0
grow
grow-0

Code

<div className="flex">
  <div className="flex-grow-0Item will not grow to fill extra space (default)flex-grow-0flex-growItem will grow to fill any available space-0">Won't grow</div>
  <div className="flex-growItem will grow to fill any available space">Will grow to fill space</div>
  <div className="flex-grow-0Item will not grow to fill extra space (default)flex-grow-0flex-growItem will grow to fill any available space-0">Won't grow</div>
</div>

Flex Grow Values

Higher flex-grow values make items grow more than others.

Demo

grow
grow-[2]
grow-[3]

Code

<div className="flex">
  <div className="flex-growDefault growth factor of 1">Grow: 1</div>
  <div className="flex-growDefault growth factor of 1flex-growflex-grow-[2]Grows twice as much as flex-grow">Grow: 2</div>
  <div className="flex-growDefault growth factor of 1flex-growflex-grow-[3]Grows three times as much as flex-grow">Grow: 3</div>
</div>

Flex Shrink

Controls how much an item can shrink when there's not enough space.

Demo

shrink
shrink-0

Code

<div className="flex w-64">
  <div className="w-40 flex-shrinkItem will shrink if needed (default)">Will shrink</div>
  <div className="w-40 flex-shrinkItem will shrink if needed (default)flex-shrinkflex-shrink-0Item will not shrink even if it causes overflow">Won't shrink</div>
</div>

Responsive Flexbox

Apply different flexbox properties at various screen sizes using Tailwind's responsive prefixes.

Quick Explanation

Responsive design lets you change how elements are arranged at different screen sizes. It's like having furniture that automatically rearranges when you move to a smaller room.

Responsive Direction

Change flex direction based on screen size.

Demo

Resize the browser!
Stacked on mobile
Row on desktop

Code

<div className="flex flex-colItems stack vertically on mobile md:flex-rowItems arrange horizontally on medium screens and up">
  <!-- Column layout on small screens -->
  <!-- Row layout on medium screens and up -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Justify Content

Change justification based on screen size.

Demo

1
2
3

Code

<div className="flex flex-col justify-start 
     sm:flex-row sm:justify-betweenItems have space between them on small screens 
     md:justify-aroundItems have space around them on medium screens 
     lg:justify-evenlyItems have equal spacing on large screens">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>