Use d-jc-flex-start to justify items against the start of the element's main axis. This is the default value.
< dt-stackdirection = " row" gap = " 100" class = " d-jc-flex-start d-w-1000 d-bar-400 d-bgc-moderate" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-jc-center to justify items along the center of the element's main axis.
< dt-stackdirection = " row" gap = " 100" class = " d-jc-center d-w-1000 d-bar-400 d-bgc-moderate" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-jc-flex-end to justify items against the end of the element's main axis.
< dt-stackdirection = " row" gap = " 100" class = " d-jc-flex-end d-w-1000 d-bar-400 d-bgc-moderate" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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-stackdirection = " row" gap = " 100" class = " d-jc-space-around d-w-1000 d-bar-400 d-bgc-moderate" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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-stackdirection = " row" gap = " 100" class = " d-jc-space-between d-w-1000 d-bar-400 d-bgc-moderate" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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-stackdirection = " row" gap = " 100" class = " d-jc-space-evenly d-w-1000 d-bar-400 d-bgc-moderate" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.