Flexbox

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

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

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

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

Alignment Variable Collection

The alignment variable modes allow us to adjust flexbox alignment 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.