Use d-ac-flex-start to pack multiple rows against the start of the element's cross axis. This is the default value.
< divclass = " d-fl-col3 d-g-200 d-fw-wrap d-ac-flex-start d-p-100 d-w100p d-bar-400 d-bgc-moderate d-hmn332" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-ac-center to pack rows along the center of the element's cross axis.
< divclass = " d-fl-col3 d-g-200 d-fw-wrap d-ac-center d-p-100 d-w100p d-bar-400 d-bgc-moderate d-hmn332" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-ac-flex-end to rack rows against the end of the element's main axis.
< divclass = " d-fl-col3 d-fw-wrap d-g-200 d-ac-flex-end d-p-100 d-w100p d-bar-400 d-bgc-moderate d-hmn332" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-ac-space-around to pack rows along the element's cross 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 row, placing half of alotted space on either side of the row. This is why the space appears doubled for interior rows versus end rows.
< divclass = " d-fl-col3 d-fw-wrap d-g-200 d-ac-space-around d-bgc-red-100 d-p-100 d-w100p d-bar-400 d-bgc-moderate d-hmn332" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-ac-space-between to distribute rows along the element's cross axis so that there is an equal amount of space between each row without inserting any space between the first or last object.
< divclass = " d-fl-col3 d-fw-wrap d-g-200 d-ac-space-between d-p-100 d-w100p d-bar-400 d-bgc-moderate d-hmn332" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use d-ac-space-evenly to distribute rows along the element's cross axis so that there is an equal amount of space on each side of the rows, but unlike d-ac-space-around the space visually looks evenly distributed between objects.
< divclass = " d-fl-col3 d-fw-wrap d-g-200 d-ac-space-evenly d-p-100 d-w100p d-bar-400 d-bgc-moderate d-hmn332" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-m-100 d-p-200 d-h-100 d-bgc-moderate-opaque d-bar-300" > </ dt-stack> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.