Align Self

Controls the positioning of a single flex or grid element along the transverse axis of its container.

Class	Property
as-auto	`align-self: auto;`
as-b	`align-self: baseline;`
as-c	`align-self: center;`
as-fe	`align-self: flex-end;`
as-fs	`align-self: flex-start;`
as-s	`align-self: stretch;`

Auto

Sets the align-self property to auto.

<div class="tc-white">
  <div class="ai-s stripes d-f g-4 h-24 rad-2 w-full">
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">A</div>
    <div class="ai-c as-auto bg-indigo d-f f-1 jc-c p-4 rad-2">B</div>
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">C</div>
  </div>
</div>

Baseline

Aligns the item to the baseline of the container.

<div class="tc-white">
  <div class="ai-s stripes d-f g-4 h-24 rad-2 w-full">
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">A</div>
    <div class="ai-c as-b bg-indigo d-f f-1 jc-c p-4 rad-2">B</div>
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">C</div>
  </div>
</div>

Center

Centers the middle item within the container.

<div class="tc-white">
  <div class="ai-s stripes d-f g-4 h-24 rad-2 w-full">
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">A</div>
    <div class="ai-c as-c bg-indigo d-f f-1 jc-c p-4 rad-2">B</div>
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">C</div>
  </div>
</div>

Flex-End

Moves the middle item to the end of the flex container.

<div class="tc-white">
  <div class="ai-s stripes d-f g-4 h-24 rad-2 w-full">
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">A</div>
    <div class="ai-c as-fe bg-indigo d-f f-1 jc-c p-4 rad-2">B</div>
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">C</div>
  </div>
</div>

Flex-Start

Aligns the middle item to the start of the flex container.

<div class="tc-white">
  <div class="ai-s stripes d-f g-4 h-24 rad-2 w-full">
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">A</div>
    <div class="ai-c as-fs bg-indigo d-f f-1 jc-c p-4 rad-2">B</div>
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">C</div>
  </div>
</div>

Stretch

Stretches the middle item to fill the container.

<div class="tc-white">
  <div class="ai-s stripes d-f g-4 h-24 rad-2 w-full">
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">A</div>
    <div class="ai-c as-s bg-indigo d-f f-1 jc-c p-4 rad-2">B</div>
    <div class="ai-c bg-indigo d-f f-1 jc-c p-4 rad-2">C</div>
  </div>
</div>

Using responsive modifiers

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

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

Using hover modifiers

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

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