Justify content (main axis) in Tailwind

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>

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.

Practice

1. What does the Tailwind class justify-center do in a flex container?

easy

A. Centers items horizontally along the main axis

B. Aligns items to the start vertically

C. Distributes items evenly with space around

D. Stacks items vertically in a column

Solution

1. Step 1: Understand the main axis in flexbox

   The main axis is horizontal by default in a flex container with flex-row.

2. Step 2: Effect of justify-center

   This class centers all flex items horizontally along the main axis.

3. Final Answer:

   Centers items horizontally along the main axis -> Option A

4. Quick Check:

   justify-center = center horizontally [OK]

Hint: Justify content controls horizontal alignment in flex row [OK]

Common Mistakes:

• Confusing justify with align items
• Thinking justify-center aligns vertically
• Mixing justify-between with justify-center

2. Which Tailwind class correctly justifies items to have equal space between them horizontally?

easy

A. justify-around

B. justify-end

C. justify-center

D. justify-between

Solution

1. Step 1: Recall the meaning of justify-between

   The class justify-between places equal space between items, but no space at the ends.

2. Step 2: Compare with other options

   justify-around adds space around items, justify-center centers them, and justify-end aligns to the right.

3. Final Answer:

   justify-between -> Option D

4. Quick Check:

   Equal space between items = justify-between [OK]

Hint: Between means space only between items, not edges [OK]

Common Mistakes:

• Choosing justify-around instead of justify-between
• Confusing justify-end with justify-between
• Using justify-center for spacing

3. Given this HTML snippet:

<div class="flex justify-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Where will the items appear inside the container?

medium

A. Items aligned to the right side

B. Items aligned to the left side

C. Items centered horizontally

D. Items spaced evenly with gaps

Solution

1. Step 1: Identify the flex container and class

   The container uses flex and justify-end, so it is a flex row with items justified to the end.

2. Step 2: Understand justify-end effect

   justify-end pushes all items to the right side (end) of the container horizontally.

3. Final Answer:

   Items aligned to the right side -> Option A

4. Quick Check:

   justify-end = right align items [OK]

Hint: End means right side in flex row by default [OK]

Common Mistakes:

• Thinking justify-end centers items
• Confusing justify-end with justify-start
• Assuming justify-end spaces items evenly

4. This code snippet does not space items as expected:

<div class="flex justify-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

What is the likely mistake?

medium

A. Missing flex-row class

B. Using justify-center instead of justify-between

C. Items need inline-block class

D. Should use justify-end for spacing

Solution

1. Step 1: Analyze the class used

   The container uses justify-center, which centers items but does not add space between them.

2. Step 2: Correct class for spacing

   To add equal space between items, justify-between should be used instead.

3. Final Answer:

   Using justify-center instead of justify-between -> Option B

4. Quick Check:

   Centering ≠ spacing between items [OK]

Hint: Use justify-between for spacing, not justify-center [OK]

Common Mistakes:

• Confusing justify-center with justify-between
• Adding unnecessary classes like inline-block
• Thinking flex-row is missing when flex defaults to row

5. You want a navigation bar with 4 links spaced evenly across the width, but with extra space at the edges. Which Tailwind class should you use on the flex container?

hard

A. justify-center

B. justify-between

C. justify-around

D. justify-start

Solution

1. Step 1: Understand spacing requirements

   The requirement is equal spacing between items and extra space at the container edges.

2. Step 2: Match with Tailwind classes

   justify-around adds equal space around each item, including edges, unlike justify-between which has no edge space.

3. Final Answer:

   justify-around -> Option C

4. Quick Check:

   Space around items and edges = justify-around [OK]

Hint: Around means space on edges and between items [OK]

Common Mistakes:

• Choosing justify-between which lacks edge space
• Using justify-center which centers items only
• Assuming justify-start spaces items evenly