| Class | Properties |
|---|---|
.align-items-start | align-items: flex-start; |
.align-items-center | align-items: center; |
.align-items-end | align-items: flex-end; |
.align-items-baseline | align-items: baseline; |
.align-items-stretch | align-items: stretch; |
Usage
Start
Use .align-items-start to align items at the start of the cross axis.
<div class="flex align-items-start bg-gray-200 h-9">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Center
Use .align-items-center to center items in the cross-axis.
<div class="flex align-items-center bg-gray-200 h-9">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>End
Use .align-items-end to align items at the end of the cross axis.
<div class="flex align-items-end bg-gray-200 h-9">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Baseline
Use .align-items-baseline to align items so that their baselines align.
<div class="flex align-items-baseline bg-gray-200 h-9">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Stretch
Use .align-items-stretch to have items stretch to fill the container.
<div class="flex align-items-stretch bg-gray-200 h-9">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 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 align items utilities.
Responsive
To control the flex alignment of items of an element at a specific breakpoint, add a {screen}: prefix to any existing align items utility.
For example, use .md:align-items-center to apply the align-items-center utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:align-items-center, add "align-items" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"align-items",
);