Utilities for setting how an element's space around and between content is distributed along its main axis.
Use d-jc-flex-start to justify items against the start of the element's main axis. This is the default value.
<dt-stack direction="row" gap="100" class="d-jc-flex-start d-w-1000 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-jc-center to justify items along the center of the element's main axis.
<dt-stack direction="row" gap="100" class="d-jc-center d-w-1000 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-jc-flex-end to justify items against the end of the element's main axis.
<dt-stack direction="row" gap="100" class="d-jc-flex-end d-w-1000 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-jc-space-around to justify items along the element's main axis so that there is an equal amount of space on each side of the item. This effectively takes all available space, divides it for each child element, placing half of available space on either side of the child. This is why the space appears doubled for interior objects versus end objects.
<dt-stack direction="row" gap="100" class="d-jc-space-around d-w-1000 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-jc-space-between to justify items along the element's main axis so that there is an equal amount of space between each item without inserting any space between the first or last object.
<dt-stack direction="row" gap="100" class="d-jc-space-between d-w-1000 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Use d-jc-space-evenly to justify items along the element's main axis so that there is an equal amount of space on each side of the item, but unlike d-jc-space-around visually evenly spaces objects.
<dt-stack direction="row" gap="100" class="d-jc-space-evenly d-w-1000 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </dt-stack>
Class
|
Output
|
|---|---|
| .d-jc-flex-start | justify-content: flex-start |
| .d-jc-flex-end | justify-content: flex-end |
| .d-jc-center | justify-content: center |
| .d-jc-space-around | justify-content: space-around |
| .d-jc-space-between | justify-content: space-between |
| .d-jc-space-evenly | justify-content: space-evenly |
| .d-jc-baseline | justify-content: baseline |
| .d-jc-normal | justify-content: normal |
| .d-jc-unset | justify-content: unset |
| .d-jc-start Deprecated | justify-content: flex-start |
| .d-jc-end Deprecated | justify-content: flex-end |
| .d-jc-around Deprecated | justify-content: space-around |
| .d-jc-between Deprecated | justify-content: space-between |
| .d-jc-evenly Deprecated | justify-content: space-evenly |
Justify Content documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope