Align Self

Utilities for setting how an element's is aligned along a parent's cross axis.

Stretch

Use d-as-stretch to stretch an item along a parent's cross axis.

<dt-stack direction="row" align="start">
  <div>1</div>
  <div class="d-as-stretch">2</div>
  <div>3</div>
</dt-stack>

Flex Start

Use d-as-flex-start to align an item to the start of the parent's cross axis.

<dt-stack direction="row">
    <div>1</div>
    <div class="d-as-flex-start">2</div>
    <div>3</div>
</dt-stack>

Center

Use d-as-center to align an item along the center of the parent's cross axis.

<dt-stack direction="row">
  <div>1</div>
  <div class="d-as-center">2</div>
  <div>3</div>
</dt-stack>

Flex End

Use d-as-flex-end to align an item from the end of the parent's cross axis.

<dt-stack direction="row">
  <div>1</div>
  <div class="d-as-flex-end">2</div>
  <div>3</div>
</dt-stack>

Classes

Class
Output
.d-as-flex-start align-self: flex-start
.d-as-flex-end align-self: flex-end
.d-as-center align-self: center
.d-as-baseline align-self: baseline
.d-as-stretch align-self: stretch
.d-as-normal align-self: normal
.d-as-auto align-self: auto
.d-as-unset align-self: unset
Align Self documentation last updated Thursday, June 11, 2026