Utilities for setting how an element's is aligned along a parent's cross axis.
Use d-as-stretch to stretch an item along a parent's cross axis.
<dt-stack direction="row" align="start" class="d-p-100 d-w100p d-hmn216 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-m-100 d-p-200 d-bgc-bold-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-as-flex-start to align an item to the start of the parent's cross axis.
<dt-stack direction="row" class="d-p-100 d-w100p d-hmn216 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-flex-start d-m-100 d-p-200 d-bgc-bold-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-as-center to align an item along the center of the parent's cross axis.
<dt-stack direction="row" class="d-p-100 d-w100p d-hmn216 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-center d-m-100 d-p-200 d-bgc-bold-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-as-flex-end to align an item from the end of the parent's cross axis.
<dt-stack direction="row" class="d-p-100 d-w100p d-hmn216 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-flex-end d-m-100 d-p-200 d-bgc-bold-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-p-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
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 |
| .d-as-start Deprecated | align-self: flex-start |
| .d-as-end Deprecated | align-self: flex-end |
Align Self documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope