Flexbox

Alignment Variable Collection

The alignment variable modes allow us to adjust horizontal alignment of flex children and text alignment on all children from a single variable mode. This is perfect for child components that will be used across multiple sections and need to match the flex alignment of the section they're added in. It also allows us to easily switch the alignment of an entire section across different screen sizes when needed without having to manually adjust each child's flex settings (which would create more code & take more time).

Applying the alignment mode

Apply classes of u-alignment-start, u-alignment-center, or u-alignment-end to a parent to set the text alignment and alignment mode.

Display Flex

The following classes apply a display: flex; while connecting the horizontal alignment of items to the alignment mode.

u-flex-horizontal-wrap
u-flex-vertical-nowrap
u-flex-horizontal-nowrap
u-flex-vertical-wrap

Align Self

Apply to a child of a flexbox or grid to align that child.

u-align-self-variable (connected to alignment mode)
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Align Items

When flexbox is horizontal, this class aligns children vertically.

u-align-items-variable (connected to alignment mode)
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Justify Content

When flexbox is vertical, this class aligns children vertically.

u-justify-content-variable (connected to alignment mode)
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around

Flex Basis Utilities

u-flex-shrink
u-flex-grow
u-flex-noshrink