Justify content

Utilities for controlling how flex items are positioned along a container's main axis


Class reference

ClassProperties
justify-startjustify-content: flex-start;
justify-centerjustify-content: center;
justify-endjustify-content: flex-end;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;

Start

Use .justify-start to justify items against the start of the flex container’s main axis:

1
2
3
<div class="flex justify-start ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Center

Use .justify-center to justify items along the center of the flex container’s main axis:

1
2
3
<div class="flex justify-center ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

End

Use .justify-end to justify items against the end of the flex container’s main axis:

1
2
3
<div class="flex justify-end ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Space between

Use .justify-between to justify items along the flex container’s main axis such that there is an equal amount of space between each item:

1
2
3
<div class="flex justify-between ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Space around

Use .justify-around to justify items along the flex container’s main axis such that there is an equal amount of space around each item:

1
2
3
<div class="flex justify-around ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Space evenly

Use .justify-around to justify items along the flex container’s main axis such that there is an equal amount of space around each item:

1
2
3
<div class="flex justify-evenly ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Responsive

To justify flex items at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:justify-between to apply the justify-between utility at only medium screen sizes and above.

<div class="justify-start md:justify-between ...">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.