Align Content

Utilities for setting how rows are distributed along it's cross axis. This property only works when a parent container has more than one line.

Classes

Class Output
.d-ac-flex-start align-content: flex-start
.d-ac-flex-end align-content: flex-end
.d-ac-center align-content: center
.d-ac-space-around align-content: space-around
.d-ac-space-between align-content: space-between
.d-ac-space-evenly align-content: space-evenly
.d-ac-baseline align-content: baseline
.d-ac-stretch align-content: stretch
.d-ac-normal align-content: normal
.d-ac-unset align-content: unset

Flex Start

Use d-ac-flex-start to pack rows against the start of the element's cross axis. This is the default value.

Center

Use d-ac-center to pack rows along the center of the element's cross axis.

Flex End

Use d-ac-flex-end to rack rows against the end of the element's main axis.

Space Around

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.

Space Between

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.

Space Evenly

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.