Tailwind CSS - Justify Content

Tailwind CSS - Justify Content

Utilities for controlling how flex and grid items are positioned along their container’s main axis. This is fundamental for creating horizontal layouts in Flexbox and horizontal alignment in Grid.

The justify-* Classes

Think of justify-content as distributing items along a shelf. You can group them at the start, in the center, at the end, or spread them out. These utilities must be applied to a flex (flex) or grid (grid) container.

Class	CSS Properties	Description
justify-start	justify-content: flex-start;	Packs items toward the start of the main axis.
justify-center	justify-content: center;	Packs items toward the center of the main axis.
justify-end	justify-content: flex-end;	Packs items toward the end of the main axis.
justify-between	justify-content: space-between;	Distributes items evenly; the first item is at the start, the last at the end.
justify-around	justify-content: space-around;	Distributes items evenly with equal space around each item.
justify-evenly	justify-content: space-evenly;	Distributes items evenly with equal space between them and at the ends.
justify-stretch	justify-content: stretch;	Stretches grid items to fill the container along the inline axis (default).
justify-normal	justify-content: normal;	Items are packed in their default position as if no value was set.

Live Demonstration

The following example showcases all major justify-content variations in a single view. This allows you to directly compare how each utility affects the layout of items within a flex container.

Example: Comparing Justify Utilities

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Justify Content Comparison</title>
  <!-- For demonstration, we use the Tailwind Play CDN. In a real project, set up Tailwind CSS with a build step. -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-4 sm:p-8">

  <div class="max-w-2xl mx-auto space-y-8">
    <h1 class="text-3xl font-bold text-center text-slate-800">Justify Content Variations</h1>

    <!-- Justify Start -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-start</h2>
      <div class="flex justify-start bg-slate-200 rounded-lg p-4 gap-4">
        <div class="w-16 h-16 rounded-lg bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>

    <!-- Justify Center -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-center</h2>
      <div class="flex justify-center bg-slate-200 rounded-lg p-4 gap-4">
        <div class="w-16 h-16 rounded-lg bg-indigo-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-indigo-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-indigo-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>

    <!-- Justify End -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-end</h2>
      <div class="flex justify-end bg-slate-200 rounded-lg p-4 gap-4">
        <div class="w-16 h-16 rounded-lg bg-violet-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-violet-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-violet-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>

    <!-- Justify Between -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-between</h2>
      <div class="flex justify-between bg-slate-200 rounded-lg p-4">
        <div class="w-16 h-16 rounded-lg bg-purple-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-purple-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-purple-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>

    <!-- Justify Around -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-around</h2>
      <div class="flex justify-around bg-slate-200 rounded-lg p-4">
        <div class="w-16 h-16 rounded-lg bg-fuchsia-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-fuchsia-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-fuchsia-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>

    <!-- Justify Evenly -->
    <div>
      <h2 class="font-mono text-sm text-slate-500">justify-evenly</h2>
      <div class="flex justify-evenly bg-slate-200 rounded-lg p-4">
        <div class="w-16 h-16 rounded-lg bg-pink-500 shadow-lg flex items-center justify-center text-white font-bold">1</div>
        <div class="w-16 h-16 rounded-lg bg-pink-500 shadow-lg flex items-center justify-center text-white font-bold">2</div>
        <div class="w-16 h-16 rounded-lg bg-pink-500 shadow-lg flex items-center justify-center text-white font-bold">3</div>
      </div>
    </div>

  </div>

</body>
</html>

Responsive Design

A powerful feature of Tailwind is the ability to apply utilities conditionally at different breakpoints. For example, you might want items to be centered on small screens but start-aligned on larger screens.

<div class="flex justify-center md:justify-between">
  <!-- This will be centered on mobile, and space-between on medium screens and up -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Combining with other Flexbox/Grid Utilities

justify-content controls the main axis. For cross-axis alignment, you will use the items-* utilities (e.g., items-center). Combining these two gives you full two-dimensional control over the placement of items in a container.