Flex

Display

To enable flex, apply a flex display utility class. This will transform your element into a flexbox container and its direct children into flex items.

Flexbox container

<div class="-d--flex"></div>

Inline Flexbox container

<div class="-d--inline-flex"></div>

Target specific breakpoints with Display responsive classes.

• -d--flex
• -d--inline-flex
• -d-sm--flex
• -d-sm--inline-flex
• -d-md--flex
• -d-md--inline-flex
• -d-lg--flex
• -d-lg--inline-flex
• -d-xl--flex
• -d-xl--inline-flex

Direction

Use direction utilities to define how items will be placed in flex containers.

Row (default)

Use -flex--row to display items horizontally. In most cases this class can be omitted as it is the browsers default behavior.

<div class="-d--flex -flex--row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Row reverse

Use -flex--row-reverse to display the items horizontally in reverse.

<div class="-d--flex -flex--row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Column

Use -flex--column to display items vertically.

<div class="-d--flex -flex--column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Column reverse

Use -flex--column-reverse to display the items vertically in reverse.

<div class="-d--flex -flex--column-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Target specific breakpoints with Direction responsive classes.

• -flex--row
• -flex--row-reverse
• -flex--column
• -flex--column-reverse
• -flex-sm--row
• -flex-sm--row-reverse
• -flex-sm--column
• -flex-sm--column-reverse
• -flex-md--row
• -flex-md--row-reverse
• -flex-md--column
• -flex-md--column-reverse
• -flex-lg--row
• -flex-lg--row-reverse
• -flex-lg--column
• -flex-lg--column-reverse
• -flex-xl--row
• -flex-xl--row-reverse
• -flex-xl--column
• -flex-xl--column-reverse

Justify content

Use justify-content utilities to alter the alignment of flex items on the main axis.

<div class="-d--flex -justify-content--start"></div>
<div class="-d--flex -justify-content--end"></div>
<div class="-d--flex -justify-content--center"></div>
<div class="-d--flex -justify-content--between"></div>
<div class="-d--flex -justify-content--around"></div>

Target specific breakpoints with Justify content responsive classes.

• -justify-content--start
• -justify-content--end
• -justify-content--center
• -justify-content--between
• -justify-content--around
• -justify-content-sm--start
• -justify-content-sm--end
• -justify-content-sm--center
• -justify-content-sm--between
• -justify-content-sm--around
• -justify-content-md--start
• -justify-content-md--end
• -justify-content-md--center
• -justify-content-md--between
• -justify-content-md--around
• -justify-content-lg--start
• -justify-content-lg--end
• -justify-content-lg--center
• -justify-content-lg--between
• -justify-content-lg--around
• -justify-content-xl--start
• -justify-content-xl--end
• -justify-content-xl--center
• -justify-content-xl--between
• -justify-content-xl--around

Align items

Use align-items utilities to alter the alignment of flex items on the cross axis.

<div class="-d--flex -align-items--start"></div>
<div class="-d--flex -align-items--end"></div>
<div class="-d--flex -align-items--center"></div>
<div class="-d--flex -align-items--baseline"></div>
<div class="-d--flex -align-items--stretch"></div>

Target specific breakpoints with Align items responsive classes.

• -align-items--start
• -align-items--end
• -align-items--center
• -align-items--baseline
• -align-items--stretch
• -align-items-sm--start
• -align-items-sm--end
• -align-items-sm--center
• -align-items-sm--baseline
• -align-items-sm--stretch
• -align-items-md--start
• -align-items-md--end
• -align-items-md--center
• -align-items-md--baseline
• -align-items-md--stretch
• -align-items-lg--start
• -align-items-lg--end
• -align-items-lg--center
• -align-items-lg--baseline
• -align-items-lg--stretch
• -align-items-xl--start
• -align-items-xl--end
• -align-items-xl--center
• -align-items-xl--baseline
• -align-items-xl--stretch

Align self

Use align-self utilities to alter the alignment of individual flex items on the cross axis.

Start

<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--start">Aligned Item</div>
  <div>Item</div>
</div>

End

<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--end">Aligned Item</div>
  <div>Item</div>
</div>

Center

<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--center">Aligned Item</div>
  <div>Item</div>
</div>

Baseline

<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--baseline">Aligned Item</div>
  <div>Item</div>
</div>

Stretch (Browser default)

<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--stretch">Aligned Item</div>
  <div>Item</div>
</div>

Target specific breakpoints with Align self responsive classes.

• -align-self--start
• -align-self--end
• -align-self--center
• -align-self--baseline
• -align-self--stretch
• -align-self-sm--start
• -align-self-sm--end
• -align-self-sm--center
• -align-self-sm--baseline
• -align-self-sm--stretch
• -align-self-md--start
• -align-self-md--end
• -align-self-md--center
• -align-self-md--baseline
• -align-self-md--stretch
• -align-self-lg--start
• -align-self-lg--end
• -align-self-lg--center
• -align-self-lg--baseline
• -align-self-lg--stretch
• -align-self-xl--start
• -align-self-xl--end
• -align-self-xl--center
• -align-self-xl--baseline
• -align-self-xl--stretch

Wrap

Use wrap utilities to define how flex items wrap in a flex container.

No Wrap (default)

<div class="-d--flex -align-items--start -flex--nowrap" style="height:116px;width:224px;">
  <div>Item</div>
</div>

Wrap

<div class="-d--flex -align-items--start -flex--wrap" style="width:224px;">
  <div>Item</div>
</div>

Wrap Reverse

<div class="-d--flex -align-items--start -flex--wrap-reverse" style="width:224px;">
  <div>Item</div>
</div>

Target specific breakpoints with Wrap responsive classes.

• -flex--nowrap
• -flex--wrap
• -flex--wrap-reverse
• -flex-sm--nowrap
• -flex-sm--wrap
• -flex-sm--wrap-reverse
• -flex-md--nowrap
• -flex-md--wrap
• -flex-md--wrap-reverse
• -flex-lg--nowrap
• -flex-lg--wrap
• -flex-lg--wrap-reverse
• -flex-xl--nowrap
• -flex-xl--wrap
• -flex-xl--wrap-reverse

Align content

Use align-content utilities on flexbox containers to alter the alignment of flex items together on the cross axis.

Start (default)

<div class="-d--flex -align-content--start -flex--wrap">
  <div>Item</div>
</div>

End

<div class="-d--flex -align-content--end -flex--wrap">
  <div>Item</div>
</div>

Center

<div class="-d--flex -align-content--center -flex--wrap">
  <div>Item</div>
</div>

Around

<div class="-d--flex -align-content--around -flex--wrap">
  <div>Item</div>
</div>

Between

<div class="-d--flex -align-content--between -flex--wrap">
  <div>Item</div>
</div>

Stretch

<div class="-d--flex -align-content--stretch -flex--wrap">
  <div>Item</div>
</div>

Target specific breakpoints with Align content responsive classes.

• -align-content--start
• -align-content--end
• -align-content--center
• -align-content--around
• -align-content--between
• -align-content--stretch
• -align-content-sm--start
• -align-content-sm--end
• -align-content-sm--center
• -align-content-sm--around
• -align-content-sm--between
• -align-content-sm--stretch
• -align-content-md--start
• -align-content-md--end
• -align-content-md--center
• -align-content-md--around
• -align-content-md--between
• -align-content-md--stretch
• -align-content-lg--start
• -align-content-lg--end
• -align-content-lg--center
• -align-content-lg--around
• -align-content-lg--between
• -align-content-lg--stretch
• -align-content-xl--start
• -align-content-xl--end
• -align-content-xl--center
• -align-content-xl--around
• -align-content-xl--between
• -align-content-xl--stretch

Fill

Use the -flex--fill class on flexbox items to display as equal widths while taking up all available horizontal space.

<div class="-d--flex">
  <div class="-flex--fill">Item</div>
  <div class="-flex--fill">Item</div>
  <div class="-flex--fill">Item</div>
</div>

Target specific breakpoints with Fill responsive classes.

• -flex--fill
• -flex-sm--fill
• -flex-md--fill
• -flex-lg--fill
• -flex-xl--fill

Grow

Use the -flex--grow* class to toggle a flex item's ability to grow and take up all available space.

<div class="-d--flex">
  <div class="-flex--grow1">Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Target specific breakpoints with Fill responsive classes.

• -flex--grow0
• -flex--grow1
• -flex-sm--grow0
• -flex-sm--grow1
• -flex-md--grow0
• -flex-md--grow1
• -flex-lg--grow0
• -flex-lg--grow1
• -flex-xl--grow0
• -flex-xl--grow1

Shrink

Use the -flex--shrink* class to toggle a flex item's ability to shrink when its size is larger than its container.

<div class="-d--flex">
  <div style="width:100%;">Item</div>
  <div class="-flex--shrink1">Shrink Item</div>
</div>

Target specific breakpoints with Shrink responsive classes.

• -flex--shrink0
• -flex--shrink1
• -flex-sm--shrink0
• -flex-sm--shrink1
• -flex-md--shrink0
• -flex-md--shrink1
• -flex-lg--shrink0
• -flex-lg--shrink1
• -flex-xl--shrink0
• -flex-xl--shrink1

Basis

Use the -flex--basis* class to specify the initial size of the flex item, before any available space is distributed according to the flex factors.

Flex-basis utility classes can be defined using the format -flex-basis-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints

Flex-basis utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Examples

<!-- flex-basis 25% on all breakpoints -->
<div class="-d--flex">
  <div class="-flex-basis--25"></div>
</div>
<!-- flex-basis 50% on all breakpoints -->
<div class="-d--flex">
  <div class="-flex-basis--50"></div>
</div>
<!-- flex-basis 75% from md -->
<div class="-d--flex">
  <div class="-flex-basis-md--75"></div>
</div>
<!-- flex-basis 50% from xl -->
<div class="-d--flex">
  <div class="-flex-basis-xl--50"></div>
</div>