Auto #
Use d-js-auto to justify an item automatically along its inline axis. This is the default value.
<div class="d-d-grid d-g-200 d-g-cols3 d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-js-auto d-p-200 d-wmn-100 d-bgc-bold-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </div>
Start #
Use d-js-start to justify an item to the start of its inline axis.
<div class="d-d-grid d-g-200 d-g-cols3 d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-js-start d-p-200 d-wmn-100 d-bgc-bold-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </div>
End #
Use d-js-end to justify an item to the end of its inline axis.
<div class="d-d-grid d-g-200 d-g-cols3 d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-js-end d-p-200 d-wmn-100 d-bgc-bold-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </div>
Center #
Use d-js-center to justify an item to the center of its inline axis.
<div class="d-d-grid d-g-200 d-g-cols3 d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-js-center d-p-200 d-wmn-100 d-bgc-bold-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> </div>
Classes #
Class
|
Output
|
|---|---|
| .d-js-center | justify-self: center !important; |
| .d-js-end | justify-self: end !important; |
| .d-js-start | justify-self: start !important; |
| .d-js-left Deprecated | justify-self: left !important; |
| .d-js-right Deprecated | justify-self: right !important; |
| .d-js-baseline | justify-self: baseline !important; |
| .d-js-first-baseline | justify-self: first-baseline !important; |
| .d-js-last-baseline | justify-self: last-baseline !important; |
| .d-js-stretch | justify-self: stretch !important; |
| .d-js-safe | justify-self: safe !important; |
| .d-js-unsafe | justify-self: unsafe !important; |
| .d-js-normal | justify-self: normal !important; |
| .d-js-legacy | justify-self: legacy !important; |
| .d-js-auto | justify-self: auto !important; |
| .d-js-unset | justify-self: unset !important; |