Tailwind CSS Justify Content

The justify-content utility class in Tailwind CSS allows you to control the alignment of flex items along the main axis of a flex container. It provides a set of classes that enable you to easily specify the justification behavior, allowing you to create flexible and responsive layouts.

Setting Justify Content

To set the justify content behavior of a flex container, you can use the justify-{value} class, where {value} can be one of the following options:

justify-start: This aligns flex items to the start of the main axis.
justify-end: This aligns flex items to the end of the main axis.
justify-center: This centers flex items along the main axis.
justify-between: This evenly distributes flex items along the main axis, with the first item aligned to the start and the last item aligned to the end.
justify-around: This evenly distributes flex items along the main axis, with equal space before, between, and after each item.
justify-evenly: This evenly distributes flex items along the main axis, with equal space between and around each item.

Tailwind justify-start

justify-start class aligns flex items to the start of the main axis.

html

<div class="flex justify-start....">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind justify-center

justify-center class centers flex items along the main axis.

html

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

Preview

Tailwind justify-between

justify-between class evenly distributes flex items along the main axis, with the first item aligned to the start and the last item aligned to the end.

html

<div class="flex justify-between....">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind justify-around

justify-around class evenly distributes flex items along the main axis, with equal space before, between, and after each item.

html

<div class="flex justify-around....">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Tailwind justify-evenly

justify-evenly class evenly distributes flex items along the main axis, with equal space between and around each item.

html

<div class="flex justify-evenly....">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

That's it! You now have a good understanding of how to use the justify content utility classes in Tailwind CSS to control the alignment of flex items along the main axis of a flex container.

Tailwind Justify Content class Table

Class	Properties
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;

Windframe Tailwind blocks

footer

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.