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.

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.

<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

Windframe Tailwind blocks

footer