Flex
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Flex
These flexbox-based utilities can replace the need for a grid system in many instances, and provide powerful constraint-based micro-layout solutions.
To set a container to display flex, add the .c-d-flex class.
I'm a flexbox container!
<div class="c-d-flex">I'm a flexbox container!</div>HTML
To set a container to inline-flex, use the class .c-d-inline-flex.
I'm an inline flexbox container!
<div class="c-d-inline-flex">I'm an inline flexbox container!</div>HTML
Inevitably you’ll wish to adjust flex at various breakpoints. You can do so with the responsive variations.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-d-flex |
.c-sm-d-flex |
.c-md-d-flex |
.c-lg-d-flex |
.c-xl-d-flex |
.c-d-inline-flex |
.c-sm-d-inline-flex |
.c-md-d-inline-flex |
.c-lg-d-inline-flex |
.c-xl-d-inline-flex |
Direction
Horizontal
The browser default horizontal direction for a flex container is row.
You may wish to reverse this - or change at the appropriate screen size.
Use .c-flex-row to set a horizontal direction (the browser default not needed unless resetting at a different breakpoint), or .c-flex-row-reverse to start the horizontal direction from the opposite side.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="c-d-flex c-flex-row">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="c-d-flex c-flex-row-reverse">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>HTML
Vertical
Use .c-flex-column to set a vertical direction, or .c-flex-column-reverse to start the vertical direction from the opposite side.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="c-d-flex c-flex-column">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="c-d-flex c-flex-column-reverse">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>HTML
Responsive variations also exist for flex-direction.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-flex-row |
.c-sm-flex-row |
.c-md-flex-row |
.c-lg-flex-row |
.c-xl-flex-row |
.c-flex-row-reverse |
.c-sm-flex-row-reverse |
.c-md-flex-row-reverse |
.c-lg-flex-row-reverse |
.c-xl-flex-row-reverse |
.c-flex-column |
.c-sm-flex-column |
.c-md-flex-column |
.c-lg-flex-column |
.c-xl-flex-column |
.c-flex-column-reverse |
.c-sm-flex-column-reverse |
.c-md-flex-column-reverse |
.c-lg-flex-column-reverse |
.c-xl-flex-column-reverse |
Wrap
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .c-flex-nowrap, wrapping with .c-flex-wrap, or reverse wrapping with .c-flex-wrap-reverse.
Nowrap
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-flex-nowrap">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Auto Wrap
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-flex-wrap">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Wrap Reverse
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-flex-wrap-reverse">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Responsive variations also exist for c-flex-wrap.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-flex-nowrap |
.c-sm-flex-nowrap |
.c-md-flex-nowrap |
.c-lg-flex-nowrap |
.c-xl-flex-nowrap |
.c-flex-wrap |
.c-sm-flex-wrap |
.c-md-flex-wrap |
.c-lg-flex-wrap |
.c-xl-flex-wrap |
.c-flex-wrap-reverse |
.c-sm-flex-wrap-reverse |
.c-md-flex-wrap-reverse |
.c-lg-flex-wrap-reverse |
.c-xl-flex-wrap-reverse |
Justify
To control the spacing for items on the main axis, use the justify-content utilities. Choose from start (browser default), end, center, space-between, or space-around.
Start
Flex item
Flex item
Flex item
<div class="c-d-flex c-justify-start">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
End
Flex item
Flex item
Flex item
<div class="c-d-flex c-justify-end">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Center
Flex item
Flex item
Flex item
<div class="c-d-flex c-justify-center">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Space Between
Flex item
Flex item
Flex item
<div class="c-d-flex c-justify-space-between">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Space Around
Flex item
Flex item
Flex item
<div class="c-d-flex c-justify-space-around">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Responsive variations also exist for c-justify-content.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-justify-start |
.c-sm-justify-start |
.c-md-justify-start |
.c-lg-justify-start |
.c-xl-justify-start |
.c-justify-end |
.c-sm-justify-end |
.c-md-justify-end |
.c-lg-justify-end |
.c-xl-justify-end |
.c-justify-center |
.c-sm-justify-center |
.c-md-justify-center |
.c-lg-justify-center |
.c-xl-justify-center |
.c-justify-space-between |
.c-sm-justify-space-between |
.c-md-justify-space-between |
.c-lg-justify-space-between |
.c-xl-justify-space-between |
.c-justify-space-around |
.c-sm-justify-space-around |
.c-md-justify-space-around |
.c-lg-justify-space-around |
.c-xl-justify-space-around |
Align items
To align items along the cross-axis, use the align-content utilities. Choose from top, bottom, center, baseline, or stretch (browser default).
Top
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-top" style="height: 100px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Bottom
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-bottom" style="height: 100px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Center
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-center" style="height: 100px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Baseline
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-baseline" style="height: 100px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Stretch
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-stretch" style="height: 100px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Responsive variations also exist for align.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-align-start |
.c-sm-align-start |
.c-md-align-start |
.c-lg-align-start |
.c-xl-align-start |
.c-align-end |
.c-sm-align-end |
.c-md-align-end |
.c-lg-align-end |
.c-xl-align-end |
.c-align-center |
.c-sm-align-center |
.c-md-align-center |
.c-lg-align-center |
.c-xl-align-center |
.c-align-baseline |
.c-sm-align-baseline |
.c-md-align-baseline |
.c-lg-align-baseline |
.c-xl-align-baseline |
.c-align-stretch |
.c-sm-align-stretch |
.c-md-align-stretch |
.c-lg-align-stretch |
.c-xl-align-stretch |
Align self
To align flexbox items on an item-by-item basis, use the align-self utilities. Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).
Top
Flex item
Aligned flex item
Flex item
<div class="c-d-flex" style="height: 100px">
<div>Flex item</div>
<div class="c-align-self-top">Aligned flex item</div>
<div>Flex item</div>
</div>HTML
Bottom
Flex item
Aligned flex item
Flex item
<div class="c-d-flex" style="height: 100px">
<div>Flex item</div>
<div class="c-align-self-bottom">Aligned flex item</div>
<div>Flex item</div>
</div>HTML
Center
Flex item
Aligned flex item
Flex item
<div class="c-d-flex" style="height: 100px">
<div>Flex item</div>
<div class="c-align-self-center">Aligned flex item</div>
<div>Flex item</div>
</div>HTML
Baseline
Flex item
Aligned flex item
Flex item
<div class="c-d-flex" style="height: 100px">
<div>Flex item</div>
<div class="c-align-self-baseline">Aligned flex item</div>
<div>Flex item</div>
</div>HTML
Stretch
Flex item
Aligned flex item
Flex item
<div class="c-d-flex" style="height: 100px">
<div>Flex item</div>
<div class="c-align-self-stretch">Aligned flex item</div>
<div>Flex item</div>
</div>HTML
Responsive variations also exist for align-self.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-align-self-start |
.c-sm-align-self-start |
.c-md-align-self-start |
.c-lg-align-self-start |
.c-xl-align-self-start |
.c-align-self-end |
.c-sm-align-self-end |
.c-md-align-self-end |
.c-lg-align-self-end |
.c-xl-align-self-end |
.c-align-self-center |
.c-sm-align-self-center |
.c-md-align-self-center |
.c-lg-align-self-center |
.c-xl-align-self-center |
.c-align-self-baseline |
.c-sm-align-self-baseline |
.c-md-align-self-baseline |
.c-lg-align-self-baseline |
.c-xl-align-self-baseline |
.c-align-self-stretch |
.c-sm-align-self-stretch |
.c-md-align-self-stretch |
.c-lg-align-self-stretch |
.c-xl-align-self-stretch |
Align Content
To align items together on the cross-axis, use the align-content utilities. Choose from start (browser default), end, center, between, around, or stretch.
In the demo below, we set the flex to wrap and added enough of flex items to wrap.
This is for multiple rows only
This property has no effect on single rows of flex items.
Start
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-content-start c-flex-wrap" style="height: 200px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
End
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-content-end c-flex-wrap" style="height: 200px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Center
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-content-center c-flex-wrap" style="height: 200px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Between
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-content-between c-flex-wrap" style="height: 200px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Around
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-content-around c-flex-wrap" style="height: 200px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Stretch
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="c-d-flex c-align-content-stretch c-flex-wrap" style="height: 200px">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>HTML
Responsive variations also exist for .c-align-content.
| Min-Width: 0px | Min-Width: 576px | Min-Width: 768px | Min-Width: 992px | Min-Width: 1200px |
|---|---|---|---|---|
.c-align-content-start |
.c-sm-align-content-start |
.c-md-align-content-start |
.c-lg-align-content-start |
.c-xl-align-content-start |
.c-align-content-end |
.c-sm-align-content-end |
.c-md-align-content-end |
.c-lg-align-content-end |
.c-xl-align-content-end |
.c-align-content-center |
.c-sm-align-content-center |
.c-md-align-content-center |
.c-lg-align-content-center |
.c-xl-align-content-center |
.c-align-content-around |
.c-sm-align-content-around |
.c-md-align-content-around |
.c-lg-align-content-around |
.c-xl-align-content-around |
.c-align-content-stretch |
.c-sm-align-content-stretch |
.c-md-align-content-stretch |
.c-lg-align-content-stretch |
.c-xl-align-content-stretch |
To learn more about flexbox, see Using CSS flexible boxes and the CSS Flexible Box Layout Module Specification.