Tailwind 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.

How to Set Tailwind 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.

<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.

<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.

<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.

<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.

<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

📚 Keep Exploring

• Tailwind CSS Flex

• Tailwind align items

Windframe Tailwind blocks

footer