⬅

Flexbox

Flexbox utilities

Classes that apply to the parent (flex container)

Class Name Responsive Class Description
flex-container
u-flex u-[sm|md|lg]-flex Create a flex container
u-flexInline u-[sm|md|lg]-flexInline Create an inline flex container
flex-direction
u-flexRow u-[sm|md|lg]-flexRow Displays items in a row
u-flexRowReverse u-[sm|md|lg]-flexRowReverse Reverses items in a row
u-flexCol u-[sm|md|lg]-flexCol Display items in a column
u-flexColReverse u-[sm|md|lg]-flexColReverse Reverses items in a column
flex-wrap
u-flexWrap u-[sm|md|lg]-flexWrap Wrap items onto another line when space allows
u-flexNoWrap u-[sm|md|lg]-flexNoWrap Force items to stay on one line
u-flexWrapReverse u-[sm|md|lg]-flexWrapReverse Wrap items and reverse direction
justify-content
u-justifyStart u-[sm|md|lg]-justifyStart Align items at the start of the main axis
u-justifyEnd u-[sm|md|lg]-justifyEnd Align items at the end of the main axis
u-justifyCenter u-[sm|md|lg]-justifyCenter Align items at the center of the main axis
u-justifyBetween u-[sm|md|lg]-justifyBetween Items have space between each other on main axis
u-justifyAround u-[sm|md|lg]-justifyAround Items have space around each other on main axis
align-items
u-itemsStretch u-[sm|md|lg]-itemsStretch Items stretch to fill container
u-itemsStart u-[sm|md|lg]-itemsStart Cross-start margin edge of the items is placed on the cross-start line
u-itemsEnd u-[sm|md|lg]-itemsEnd Cross-end margin edge of the items is placed on the cross-end line
u-itemsCenter u-[sm|md|lg]-itemsCenter Items are centered in the cross-axis
u-itemsBaseline u-[sm|md|lg]-itemsBaseline Items have their baselines aligned on the cross axis
align-content
u-contentStart u-[sm|md|lg]-contentStart Items are packed to the start of the container
u-contentEnd u-[sm|md|lg]-contentEnd Items are packed to the end of the container
u-contentCenter u-[sm|md|lg]-contentCenter Items are packed to the centre of the container
u-contentStretch u-[sm|md|lg]-contentStretch Lines stretch to take up the remaining space
u-contentBetween u-[sm|md|lg]-contentBetween Lines evenly distributed; first and last lines at container edge
u-contentAround u-[sm|md|lg]-contentAround Lines evenly distributed with equal space around each line

Classes that apply to the children (flex items)

Class Name Responsive Class Description
align-self
u-selfStart u-[sm|md|lg]-selfStart Aligns single item at cross axis start
u-selfEnd u-[sm|md|lg]-selfEnd Aligns single item at cross axis end
u-selfCenter u-[sm|md|lg]-selfCenter Aligns single item at cross axis center
u-selfStretch u-[sm|md|lg]-selfStretch Stretches single item from cross start to end
u-selfAuto u-[sm|md|lg]-selfAuto Uses the default set by `align-items`
order
u-orderFirst u-[sm|md|lg]-orderFirst Positions an item at the start
u-orderLast u-[sm|md|lg]-orderLast Positions an item at the end
u-orderNone u-[sm|md|lg]-orderNone Sets item order to the default of `0`
flex-grow
u-flexGrowX u-[sm|md|lg]-flexGrowX Specify how much the flex item will grow relatively.
`X` can be any of the following numbers: `1`, `2`, `3`, `4`, `5`.
Aligning with `auto` margins
u-expand u-[sm|md|lg]-expand Expand all margins to fill remaining space
u-expandTop u-[sm|md|lg]-expandTop Expand top margin to fill remaining space
u-expandRight u-[sm|md|lg]-expandRight Expand right margin to fill remaining space
u-expandBottom u-[sm|md|lg]-expandBottom Expand bottom margin to fill remaining space
u-expandLeft u-[sm|md|lg]-expandLeft Expand left margin to fill remaining space
Read more about how this works.

Usage

Using responsive classes

<div class="u-md-flex  u-md-flexWrap">
  <!-- flex items -->
</div>

Centering an element in its container

<div class="u-flex  u-itemsCenter  u-justifyCenter">
  <p>Some centred content</p>
</div>

Usage with the Grid

Note: The o-grid component already sets display: flex on the root element.

<div class="o-grid  o-grid--alignBottom">
  <div class="o-grid-cell  u-size1of3  u-md-selfCenter">Content</div>
  <div class="o-grid-cell  u-size1of3">Content</div>
  <div class="o-grid-cell  u-size1of3">Content</div>
</div>

Usage with the Size Utilities

<div class="u-flex  u-justifyEnd">
  <div class="u-size4of12">Content</div>
  <div class="u-size2of12">Content</div>
  <div>Content</div>
</div>

<div class="u-flex  u-itemsCenter">
  <div class="u-size1of4">Content</div>
  <div class="u-size1of4">Content</div>
  <div class="u-sizeFill">Content</div>
</div>