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
| Class | Attribute |
|---|---|
flex | display: flex |
flex-inline | display: 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!