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.
Flex-basis Class | Value |
|---|---|
-flex-basis--auto | flex-basis: auto; |
-flex-basis--* | can be incremented by 5% |
Target specific breakpoints#
To target a specific breakpoint, add the breakpoint abbreviation to the class.
Flex-basis Class | Value |
|---|---|
-flex-basis-sm--auto | Visible only from sm |
-flex-basis-sm--* | Visible only from sm, can be incremented by 5% |
-flex-basis-md--auto | Visible only from md |
-flex-basis-md--* | Visible only from md, can be incremented by 5% |
-flex-basis-lg--auto | Visible only from lg |
-flex-basis-lg--* | Visible only from lg, can be incremented by 5% |
-flex-basis-xl--auto | Visible only from xl |
-flex-basis-xl--* | Visible only from xl, can be incremented by 5% |
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>