Align Items

Controls flex and grid positioning along a container’s transverse axis.

Class	Property
ai-b	`align-items: baseline;`
ai-c	`align-items: center;`
ai-fe	`align-items: flex-end;`
ai-fs	`align-items: flex-start;`
ai-s	`align-items: stretch;`

Baseline

Aligns items along the container’s baseline.

<div class="ai-b area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">E</div>
</div>

Center

Aligns items in the center of the cross axis.

<div class="ai-c area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">E</div>
</div>

Flex End

Aligns items at the end of the cross axis.

<div class="ai-fe area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">E</div>
</div>

Flex Start

Aligns items at the start of the cross axis.

<div class="ai-fs area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">E</div>
</div>

Stretch

Stretches items to fill the container’s height.

<div class="ai-s area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f fw-700 jc-c p-4 rad-2">E</div>
</div>

Using responsive modifiers

Using responsive breakpoints like sm:ai-*, md:ai-*, lg:ai-*, and xxl:ai-* allows targeting specific utilities in different viewports.

<div class="ai-s md:ai-e ..."></div>

Using hover modifiers

Using :hover modifiers such as h:ai-* allows you to override elements and change their values when hovering over them.

<div class="ai-s h:ai-e ..."></div>