Flexbox

Responsive utility classes to set various flexbox CSS properties. All CSS classes can be used with the display-flex class as well as flex-row.

Flex Direction

The flex-direction property controls the direction of the main flex axis.

Available values:

Examples

Row - default

Column

Flex Wrap

The flex-wrap property controls whether flex children will wrap to a next line when there is no longer enough space.

Available values:

Examples

Nowrap - default

Wrap

Justify Content

The justify-content property specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.

Available values:

Examples

Justify Start - default

Justify End

Justify Center

Justify Between

Justify Around

Align Items

The align-items property specifies the default alignment for items within the flex container.

Available values:

Examples

Align Stretch - default

Align Start

Align End

Align Center

Align Self

The align-self property specifies the alignment on a single item within the flex container.

Available values:

Examples

Align Self Auto - default

Align Self Stretch

Align Self Start

Align Self End

Align Self Center

Vertical Divider

.divider-vertical is a thin vertical rule for separating inline groups inside a flex row — for example clusters of summary stats in a header. It stretches to the height of the flex line (align-self: stretch), so no fixed height is needed.