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>