Flexbox

display

Our flex utilities are easy to use and fairly comprehensive. The only property you need in place to start unlocking the power of flexbox is display: flex, or display: inline-flex if you have a need for it.

Class

ClassAttribute
flexdisplay: flex
flex-inlinedisplay: flex-inline

flex--center-content under Content is the only flex utility that DOES NOT require the initial flex class - display: flex is already set.

align

Sets the flex container to align all contained elements to either the start, center, end, or baseline points of the container.

Visualizer

Try this!Click the buttons below to toggle the flex align utility classes!

align-self

Sets individual elements to align to either the start, center, end, or baseline points of a flex container.

Visualizer

Try this!Click the buttons below to toggle the flex align-self utility classes!

justify

Sets individual elements to justify to either the start, center or end of a flex container or to add space around or between within a flex container.

Visualizer

Try this!Click the buttons below to toggle the flex justify utility classes!

direction

Utility classes to handle the direction of elements within a flex container.

Visualizer

Try this!Click the buttons below to toggle the direction utility -- classes!

content

Utility classes to handle wrapping, spacing, and centering of content within a flex container.

Visualizer

Try this!Click the buttons below to toggle the content utility classes!