| Class | Properties |
|---|---|
.justify-content-start | justify-content: flex-start; |
.justify-content-center | justify-content: center; |
.justify-content-end | justify-content: flex-end; |
.justify-content-between | justify-content: space-between; |
.justify-content-around | justify-content: space-around; |
Usage
Start
Use .justify-content-start to justify items against the start of the flex container’s main axis.
<div class="flex justify-content-start bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Center
Use .justify-content-center to justify items along the center of the flex container’s main axis.
<div class="flex justify-content-center bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>End
Use .justify-content-end to justify items against the end of the flex container’s main axis.
<div class="flex justify-content-end bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Space between
Use .justify-content-between to justify items along the flex container’s main axis such that there is an equal amount of space between each item.
<div class="flex justify-content-between bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Space around
Use .justify-content-around to justify items along the flex container’s main axis such that there is an equal amount of space around each item.
<div class="flex justify-content-around bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Variants
By default, only responsive variants are generated for justify content utilities.
Responsive
To control the justification of flex content at a specific breakpoint, add a {screen}: prefix to any existing justify content utility.
For example, use .md:justify-content-between to apply the justify-content-between utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:justify-content-between, add "justify-content" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"justify-content",
);