Flexbox layout

In this chapter, you learn how to build Flexbox layouts with Tailwind CSS.

Creating a flex container

Create a flex container with the flex class.

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Inline flex

<span class="inline-flex">...</span>

Direction (flex-direction)

Class	Direction
flex-row	Left to right (default)
flex-row-reverse	Right to left
flex-col	Top to bottom
flex-col-reverse	Bottom to top

<!-- Vertical -->
<div class="flex flex-col">
  <div>Top</div>
  <div>Middle</div>
  <div>Bottom</div>
</div>

<!-- Horizontal (reversed) -->
<div class="flex flex-row-reverse">
  <div>Shown at the right end</div>
  <div>Shown in the center</div>
  <div>Shown at the left end</div>
</div>

Wrapping (flex-wrap)

Class	Behavior
flex-wrap	Wraps
flex-nowrap	Does not wrap (default)
flex-wrap-reverse	Wraps in the reverse direction

<div class="flex flex-wrap">
  <div class="w-1/3">1</div>
  <div class="w-1/3">2</div>
  <div class="w-1/3">3</div>
  <div class="w-1/3">4</div>  <!-- Goes to the next row -->
</div>

Main-axis alignment (justify-content)

Class	Alignment
justify-start	Start
justify-end	End
justify-center	Center
justify-between	Space between (equal gaps)
justify-around	Distributed (with margins on both ends)
justify-evenly	Fully even distribution

<!-- Centered -->
<div class="flex justify-center">
  <div>Centered</div>
</div>

<!-- Space between -->
<div class="flex justify-between">
  <div>Left end</div>
  <div>Right end</div>
</div>

<!-- Even distribution -->
<div class="flex justify-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Cross-axis alignment (align-items)

Class	Alignment
items-start	Start
items-end	End
items-center	Center
items-baseline	Baseline
items-stretch	Stretch (default)

<!-- Vertically centered -->
<div class="flex items-center h-32 bg-gray-100">
  <div>Vertically centered</div>
</div>

<!-- Fully centered -->
<div class="flex items-center justify-center h-screen">
  <div>Center of the screen</div>
</div>

Aligning individual items (align-self)

Class	Alignment
self-auto	Follows the parent's setting
self-start	Start
self-end	End
self-center	Center
self-stretch	Stretch

<div class="flex items-start h-32 bg-gray-100">
  <div>Start position</div>
  <div class="self-center">Center</div>
  <div class="self-end">End position</div>
</div>

Grow and shrink (flex-grow / flex-shrink)

Class	Behavior
grow	Fills the available space
grow-0	Does not grow
shrink	Shrinks
shrink-0	Does not shrink

<!-- The middle item fills the available space -->
<div class="flex">
  <div class="w-20">Fixed width</div>
  <div class="grow">Fills the rest</div>
  <div class="w-20">Fixed width</div>
</div>

Base size (flex-basis)

Class	Size
basis-0	0
basis-1/4	25%
basis-1/2	50%
basis-full	100%
basis-auto	Auto

<div class="flex">
  <div class="basis-1/4">25%</div>
  <div class="basis-1/2">50%</div>
  <div class="basis-1/4">25%</div>
</div>

basis-* specifies the initial size within a flex context. It is similar to w-*, but it differs in that basis-* is the basis for the flex-grow / flex-shrink calculation. Within a flex layout, using basis-* rather than w-* makes the grow and shrink behave as intended.

Shorthand (flex)

Class	Meaning
flex-1	flex: 1 1 0% (grows and shrinks evenly)
flex-auto	flex: 1 1 auto
flex-initial	flex: 0 1 auto
flex-none	flex: none (fixed)

<!-- Equal widths -->
<div class="flex">
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
</div>

The difference between flex-1 and flex-auto

Be careful about the difference between flex-1 and flex-auto. Because flex-1 has flex-basis: 0%, it divides space evenly regardless of the content size. flex-auto, on the other hand, has flex-basis: auto, so it distributes the remaining space while taking the content size into account. When you want equal widths, use flex-1.

Gaps (gap)

Set the spacing between items with the gap class.

<div class="flex gap-4">
  <div>16px gap</div>
  <div>16px gap</div>
  <div>16px gap</div>
</div>

<!-- Different gaps for horizontal and vertical -->
<div class="flex flex-wrap gap-x-4 gap-y-2">
  <div>16px horizontal, 8px vertical</div>
  ...
</div>

Order (order)

Class	Order
order-first	-9999
order-last	9999
order-none	0
order-1 to order-12	1–12

<div class="flex">
  <div class="order-3">Shown 3rd</div>
  <div class="order-1">Shown 1st</div>
  <div class="order-2">Shown 2nd</div>
</div>

Practical examples

Navigation bar

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-6">
    <a href="#" class="hover:text-blue-500">Home</a>
    <a href="#" class="hover:text-blue-500">About</a>
    <a href="#" class="hover:text-blue-500">Contact</a>
  </div>
</nav>

Card layout

<div class="flex flex-col h-full bg-white rounded-lg shadow-sm">
  <img src="..." class="rounded-t-lg" />
  <div class="flex-1 p-4">
    <h3 class="font-bold">Title</h3>
    <p class="text-gray-600">Description...</p>
  </div>
  <div class="p-4 border-t border-gray-200">
    <button class="w-full py-2 bg-blue-500 text-white rounded-sm">
      View details
    </button>
  </div>
</div>

Input form

<div class="flex">
  <input
    type="text"
    class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-hidden"
    placeholder="Search..."
  />
  <button class="px-4 py-2 bg-blue-500 text-white rounded-r-lg">
    Search
  </button>
</div>

Summary

• Create a flex container with flex
• Align the main axis with justify-* and the cross axis with items-*
• Control grow and shrink with grow / shrink
• Set the spacing between items with gap
• Combine with responsive design for flexible layouts

What to read next

• Grid layout — design two-dimensional layouts
• Spacing — organize when to use padding / margin / gap
• Tailwind CSS Guide table of contents — back to the structure of all 18 chapters