Lumos comes with an array of flexbox utilities that allow you to easily add a flexbox layout to an element and change the alignment/justification or children.

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 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

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

Flex Basis Utilities

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

Up Next: Trigger & State