Utilities for setting how an element's is aligned along an element's cross axis.
Use d-ai-stretch to stretch items across the element's cross axis. This is the default value.
<dt-stack direction="row" class="d-ai-stretch 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-px-200 d-py-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-200 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-50 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-ai-flex-start to align items to the start of the element's cross axis.
<dt-stack direction="row" class="d-ai-flex-start 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-px-200 d-py-50 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-300 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-ai-center to distribute items along the center of the element's cross axis.
<dt-stack direction="row" class="d-ai-center 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-px-200 d-py-50 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-300 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-ai-flex-end to distribute items from the end of the element's cross axis.
<dt-stack direction="row" class="d-ai-flex-end 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-px-200 d-py-50 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-300 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-m-100 d-px-200 d-py-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Class
|
Output
|
|---|---|
| .d-ai-flex-start | align-items: flex-start |
| .d-ai-flex-end | align-items: flex-end |
| .d-ai-center | align-items: center |
| .d-ai-baseline | align-items: baseline |
| .d-ai-stretch | align-items: stretch |
| .d-ai-normal | align-items: normal |
| .d-ai-unset | align-items: unset |
| .d-ai-start Deprecated | align-items: flex-start |
| .d-ai-end Deprecated | align-items: flex-end |
Align Items documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope