Sections

Align items

Utilities for controlling how flex items are laid out along the cross axis on the current line.

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.

1
2
3
<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.

1
2
3
<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.

1
2
3
<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.

1
2
3
<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.

1
2
3
<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",
);