Tailwind CSS Flexbox

Tailwind CSS provides a comprehensive set of utilities for building flexible, responsive layouts using the Flexbox layout model.

Flexbox is ideal for one-dimensional layouts (either a row or a column). By setting an element to flex, you gain access to a bunch of alignment and distribution controls that make centering items or creating complex navigation bars nice and simple.

Flex Container

To use flexbox, start by adding the flex utility to an element. This effectively sets display: flex.

Flex Direction & Wrap

You can use the following classes to control the flow direction and whether items should wrap when they run out of space.

Class Properties
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;
flex-wrap flex-wrap: wrap;
flex-nowrap flex-wrap: nowrap;

Flex Basis, Grow & Shrink

These utilities control the initial size of items and how they should expand or contract relative to each other.

Category Classes Description
Basis Tailwind has various utilities for controlling the initial size of flex items. These include a numeric spacing scale (e.g., basis-64), the container scale (basis-xs through basis-7xl), fractions (e.g., basis-1/3), basis-full, basis-auto, CSS variables (e.g., basis-(--my-var)), and arbitrary values (e.g., basis-[200px]). Sets initial size (e.g., basis-1/4 or basis-64).
Grow
  • grow
  • grow-<number>
  • grow-[<value>]
  • grow-(<custom-property>)
 Allow/prevent item from growing to fill space.
Shrink
  • shrink
  • shrink-<number>
  • shrink-[<value>]
  • shrink-(<custom-property>)
 Allow/prevent item from shrinking.
Shorthands
  • flex-<number>
  • flex-<fraction>
  • flex-auto
  • flex-initial
  • flex-none
  • flex-(<custom-property>)
  • flex-[<value>]
 Common combinations of grow, shrink, and basis.

Justify & Align

Alignment is where Flexbox excels. You can control the distribution of items along the main axis (Justify) and the cross axis (Align).

The following table shows the available utilities for Justify and Align, along with their corresponding CSS properties.

Justify Content (Main Axis)

Use the following classes to control the distribution of items along the main axis:

Class Property
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 (Cross Axis)

Use the following classes to control the distribution of items along the cross axis:

Class Property
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;

Gap

Instead of individual margins, you can use the gap-{size} utility on the flex container to consistent spacing between items. In Tailwind 4, you can use any value from the spacing scale (e.g., gap-4), arbitrary values (e.g., gap-[20vw]), or even CSS variables (e.g., gap-(--my-gap)).

You also have the option of specifying the x and y gap separately using gap-x-{size} and gap-y-{size}.

Example

This example demonstrates some of the ways Tailwind's flexbox utilities can be used in common scenarios:

View Output

In the next page, we'll explore the Layout utilities for building two-dimensional structures using CSS Grid.