Justify Content

Controls how items are positioned along the main axis of a flex or grid container. For a flex row, this is horizontal alignment; for a flex column, this is vertical alignment. This utility is fundamental for distributing space and aligning items within containers. In Tailwind v4, justify utilities have improved compatibility with logical properties for better RTL support.

Flexbox & Grid1 variant7 examples

Official Docs Open Playground

Basic usage:

<div class="flex justify-start bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Start</div>
  <div class="bg-blue-200 p-4 rounded">Center</div>
  <div class="bg-blue-300 p-4 rounded">End</div>
</div>

Examples

Items aligned to the start of the container

<div class="flex justify-start bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Start</div>
  <div class="bg-blue-200 p-4 rounded">Center</div>
  <div class="bg-blue-300 p-4 rounded">End</div>
</div>

Edit in playground

Items centered horizontally in the container

<div class="flex justify-center bg-gray-100 p-4 rounded-lg">
  <div class="bg-green-100 p-4 rounded">Start</div>
  <div class="bg-green-200 p-4 rounded">Center</div>
  <div class="bg-green-300 p-4 rounded">End</div>
</div>

Edit in playground

Items aligned to the end of the container

<div class="flex justify-end bg-gray-100 p-4 rounded-lg">
  <div class="bg-purple-100 p-4 rounded">Start</div>
  <div class="bg-purple-200 p-4 rounded">Center</div>
  <div class="bg-purple-300 p-4 rounded">End</div>
</div>

Edit in playground

Space distributed between items (first item at start, last at end)

<!-- Distribute space between items -->
<div class="flex justify-between bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">First</div>
  <div class="bg-blue-200 p-4 rounded">Middle</div>
  <div class="bg-blue-300 p-4 rounded">Last</div>
</div>

Edit in playground

Space distributed around items (equal space around each item)

<!-- Distribute space around items -->
<div class="flex justify-around bg-gray-100 p-4 rounded-lg">
  <div class="bg-green-100 p-4 rounded">First</div>
  <div class="bg-green-200 p-4 rounded">Middle</div>
  <div class="bg-green-300 p-4 rounded">Last</div>
</div>

Edit in playground

Space distributed evenly between items (equal space between items)

<!-- Equal spacing between items -->
<div class="flex justify-evenly bg-gray-100 p-4 rounded-lg">
  <div class="bg-purple-100 p-4 rounded">First</div>
  <div class="bg-purple-200 p-4 rounded">Middle</div>
  <div class="bg-purple-300 p-4 rounded">Last</div>
</div>

Edit in playground

Common layout patterns with different justify values

<!-- Common layout patterns with justify-content -->
<nav class="bg-white py-4 rounded-lg shadow-md mb-4">
  <!-- Container with items at opposite ends -->
  <div class="container mx-auto px-4 flex justify-between items-center">
    <div class="font-bold text-xl">Logo</div>
    <div class="flex space-x-4">
      <a href="#" class="text-blue-600">Home</a>
      <a href="#" class="text-gray-600">About</a>
      <a href="#" class="text-gray-600">Contact</a>
    </div>
  </div>
</nav>

<footer class="bg-gray-100 py-4 rounded-lg mt-4">
  <!-- Container with centered content -->
  <div class="container mx-auto px-4 flex justify-center">
    <p class="text-gray-600">&copy; 2025 Example Company</p>
  </div>
</footer>

Edit in playground

Live Preview

Try the Justify Content utility with different values

Open Interactive Playground

Variants

normal: default browser behavior; start: items packed at start of container; end: items packed at end of container; center: items centered in container; between: items evenly distributed with first at start and last at end; around: items evenly distributed with equal space around each; evenly: items evenly distributed with equal space between each; stretch: items stretched to fill container

normalstartendcenterbetweenaroundevenlystretch