| Class | Properties |
|---|---|
.align-content-start | align-content: flex-start; |
.align-content-center | align-content: center; |
.align-content-end | align-content: flex-end; |
.align-content-between | align-content: space-between; |
.align-content-around | align-content: space-around; |
Usage
Start
Use .align-content-start to pack lines in a flex container against the start of the cross axis.
<div class="row row-sm align-content-start flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>Center
Use .align-content-center to pack lines in a flex container in the center of the cross axis.
<div class="row row-sm align-content-center flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>End
Use .align-content-end to pack lines in a flex container against the end of the cross axis.
<div class="row row-sm align-content-end flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>Space between
Use .align-content-between to distribute lines in a flex container such that there is an equal amount of space between each line.
<div class="row row-sm align-content-between flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>Space around
Use .align-content-around to distribute lines in a flex container such that there is an equal amount of space around each line.
<div class="row row-sm align-content-around flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="col-6 md:col-4 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>Variants
By default, only responsive variants are generated for align content utilities.
Responsive
To control the flex alignment of content of an element at a specific breakpoint, add a {screen}: prefix to any existing align content utility.
For example, use .md:align-content-center to apply the align-content-center utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:align-content-center, add "align-content" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"align-content",
);