What is Justify content (main axis) in Tailwind?

Justify content (main axis) in Tailwind - Syntax, Examples & Explanation

Introduction

Justify content helps you control how items line up horizontally inside a container. It makes your layout look neat and balanced.

You want to spread buttons evenly across a toolbar.

You need to center a group of images in a row.

You want to push some items to the left and others to the right in a menu.

You want equal space between cards in a gallery.

You want to align text and icons nicely in a navigation bar.

Syntax

Tailwind

justify-start
justify-center
justify-end
justify-between
justify-around
justify-evenly

These classes work only on flex containers (use flex class first).

They control horizontal alignment if flex direction is row (default).

Examples

Items align to the left side.

Tailwind

<div class="flex justify-start">...</div>

Items are centered horizontally.

Tailwind

<div class="flex justify-center">...</div>

Items spread out with space between them.

Tailwind

<div class="flex justify-between">...</div>

Items have equal space around them.

Tailwind

<div class="flex justify-evenly">...</div>

Sample Program

This page shows four boxes with three items each. Each box uses a different justify-* class to show how items align horizontally inside a flex container.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Justify Content Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Justify Content (Main Axis) Examples</h1>

  <section class="mb-6">
    <h2 class="mb-2">justify-start (items to left)</h2>
    <div class="flex justify-start bg-gray-100 p-4 border rounded">
      <div class="bg-blue-500 text-white px-4 py-2 rounded">Item 1</div>
      <div class="bg-blue-500 text-white px-4 py-2 rounded ml-2">Item 2</div>
      <div class="bg-blue-500 text-white px-4 py-2 rounded ml-2">Item 3</div>
    </div>
  </section>

  <section class="mb-6">
    <h2 class="mb-2">justify-center (items centered)</h2>
    <div class="flex justify-center bg-gray-100 p-4 border rounded">
      <div class="bg-green-500 text-white px-4 py-2 rounded">Item 1</div>
      <div class="bg-green-500 text-white px-4 py-2 rounded ml-2">Item 2</div>
      <div class="bg-green-500 text-white px-4 py-2 rounded ml-2">Item 3</div>
    </div>
  </section>

  <section class="mb-6">
    <h2 class="mb-2">justify-between (space between items)</h2>
    <div class="flex justify-between bg-gray-100 p-4 border rounded">
      <div class="bg-red-500 text-white px-4 py-2 rounded">Item 1</div>
      <div class="bg-red-500 text-white px-4 py-2 rounded">Item 2</div>
      <div class="bg-red-500 text-white px-4 py-2 rounded">Item 3</div>
    </div>
  </section>

  <section>
    <h2 class="mb-2">justify-evenly (equal space around)</h2>
    <div class="flex justify-evenly bg-gray-100 p-4 border rounded">
      <div class="bg-purple-500 text-white px-4 py-2 rounded">Item 1</div>
      <div class="bg-purple-500 text-white px-4 py-2 rounded">Item 2</div>
      <div class="bg-purple-500 text-white px-4 py-2 rounded">Item 3</div>
    </div>
  </section>
</body>
</html>

OutputSuccess

Important Notes

Always add flex class to make the container a flexbox.

Justify content works on the main axis, which is horizontal by default.

Use justify-* classes to quickly control horizontal spacing without writing custom CSS.

Summary

Justify content controls horizontal alignment of items in a flex container.

Use classes like justify-start, justify-center, and justify-between to arrange items.

It helps make layouts look clean and balanced easily.