Justify Content

Utilities for controlling the alignment of items along the main axis.

Class Name	CSS Equivalent
justify-start	justify-content: start;
justify-center	justify-content: center;
justify-end	justify-content: end;
justify-stretch	justify-content: stretch;
justify-normal	justify-content: normal;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;

Justify Start

The .justify-start class sets the justify-content property to start, aligning items along the main axis at the start.

<div class="flex gap-xs justify-start w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify Center

The .justify-center class sets the justify-content property to center, aligning items along the main axis at the center.

<div class="flex gap-xs justify-center w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify End

The .justify-end class sets the justify-content property to end, aligning items along the main axis at the end.

<div class="flex gap-xs justify-end w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify Stretch

The .justify-stretch class sets the justify-content property to stretch, allowing items to stretch along the main axis.

<div class="grid grid-flow-column gap-xs justify-stretch w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify Normal

The .justify-normal class sets the justify-content property to normal, which is the default behavior.

<div class="flex gap-xs justify-normal w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify Space Between

The .justify-between class sets the justify-content property to space-between, distributing space evenly between items along the main axis.

<div
  class="flex gap-xs justify-between w

-full"
>
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify Space Around

The .justify-around class sets the justify-content property to space-around, distributing space evenly around items along the main axis.

<div class="flex gap-xs justify-around w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Justify Space Evenly

The .justify-evenly class sets the justify-content property to space-evenly, distributing space evenly between and around items along the main axis.

<div class="flex gap-xs justify-evenly w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3