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 #
Inline Flexbox container #
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.
Row reverse #
Use -flex--row-reverse to display the items horizontally in reverse.
Column reverse #
Use -flex--column-reverse to display the items vertically in reverse.
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.
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.
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 #
End #
Center #
Baseline #
Stretch (Browser default) #
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) #
Wrap #
Wrap Reverse #
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) #
End #
Center #
Around #
Between #
Stretch #
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.
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.
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.
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--0 | flex-basis: 0; |
-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--0 | 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--0 | 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--0 | 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--0 | Visible only from xl |
-flex-basis-xl--* | Visible only from xl, can be incremented by 5% |
Examples #