Skip to content

Align Items

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

Class Properties

ai-n

align-items: normal;

ai-stretch

align-items: stretch;

ai-c

align-items: center;

ai-start

align-items: start;

ai-e

align-items: end;

ai-fs

align-items: flex-start;

ai-fe

align-items: flex-end;

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="bg-cyan fw-700 ins p-4 rad-2">A</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
<div class="bg-cyan fw-700 ins 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="bg-cyan fw-700 ins p-4 rad-2">A</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
<div class="bg-cyan fw-700 ins 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="bg-cyan fw-700 ins p-4 rad-2">A</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
<div class="bg-cyan fw-700 ins 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="bg-cyan fw-700 ins p-4 rad-2">A</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
<div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Using breakpoints

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 variants

Using :hover variants 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>