Flexbox

Flexbox utilities for some fast and easy-to-use flexboxin!' Note that these utilities do not encompass every flexbox rule, but only the most commonly-used ones.

Responsive modifiers such as __m or __l can be added to nearly all the classes below to make them functional only for screen sizes at our responsive breakpoints.


Display Flex

Set the flex container.

.flex, .l-flex Display Flex

<div class="flex">Flex</div>

Set horizonal positioning of items within the flex container.

.flex-row Flex Row
Row Item 1
Row Item 2
Row Item 3
.flex-row-reverse Flex Row Reverse
Row Item 1
Row Item 2
Row Item 3
.flex-column Flex Column
Column Item 1
Column Item 2
Column Item 3
.flex-column-reverse Flex Column Reverse
Column Item 1
Column Item 2
Column Item 3
<div class="flex flex-row">Flex Row</div>
<div class="flex flex-row-reverse">Flex Row Reverse</div>
<div class="flex flex-column">Flex Col</div>
<div class="flex flex-column-reverse">Flex Col Reverse</div>

force flex items to wrap. usually only needed when items used fixed size.

.flex-wrap Flex Wrap
Wrap Item 1
Wrap Item 2
Wrap Item 3
.flex-wrap-reverse Flex Wrap Reverse
Wrap Reverse Item 1
Wrap Reverse Item 2
Wrap Reverse Item 3
.flex-nowrap Flex No Wrap
No Wrap Item 1
No Wrap Item 2
No Wrap Item 3
<div class="flex flex-wrap">Flex Wrap</div>
<div class="flex flex-wrap-reverse">Flex Wrap Reverse</div>
<div class="flex flex-nowrap">Flex No Wrap</div>

Set horizontal alignment of content within the flex container.

.flex-justify-start Justify Flex Start
.flex-justify-end Justify Flex End
.flex-justify-center Justify Flex Center
.flex-justify-between Justify Flex Space Between
Item 1
Item 2
Item 3
.flex-justify-around Justify Flex Space Around
Item 1
Item 2
Item 3
.flex-justify-even Justify Flex Space Evenly
Item 1
Item 2
Item 3
<div class="flex flex-justify-start">Flex X Start</div>
<div class="flex flex-justify-end">Flex X End</div>
<div class="flex flex-justify-center">Flex X Center</div>
<div class="flex flex-justify-between">Flex X Space Between</div>
<div class="flex flex-justify-around">Flex X Space Around</div>
<div class="flex flex-justify-even">Flex X Evenly Space</div>

Set vertical alignment of content within the flex container.

.flex-align-even Flex Y Start
Item 1
Item 2
Item 3
.flex-align-even Flex Y End
Item 1
Item 2
Item 3
.flex-align-even Flex Y Center
Item 1
Item 2
Item 3
.flex-align-even Flex Y Baseline
Item 1
Item 2
Item 3
.flex-align-even Flex Y Stretch
Item 1
Item 2
Item 3
<div class="flex flex-align-start">Flex Y Start</div>
<div class="flex flex-align-end">Flex Y End</div>
<div class="flex flex-align-center">Flex Y Center</div>
<div class="flex flex-align-baseline">Flex Y Baseline</div>
<div class="flex flex-align-stretch">Flex Y Stretch</div>

Set alignment of a single item within the flex container.

Item 1
Item 2
Item 3
.flex-align-self-end Item 4

Implementation example:

<div class="flex flex-column flex-align-start">
	<div>Item 1</div>
	<div class="flex-align-self-end">Item 2</div>
</div>

Options:

<div class="flex-align-self-start"> Flex Align This Item Start</div>
<div class="flex-align-self-end"> Flex Align This Item End</div>
<div class="flex-align-self-center"> Flex Align This Item Center</div>
<div class="flex-align-self-stretch"> Flex Align This Item Stretch</div>
<div class="flex-align-self-between"> Flex Align This Item Space Between</div>
<div class="flex-align-self-around"> Flex Align This Item Space Around</div>

Manually set flex item sizing based on ratios

e.g. 1-1-2 items will be a 25% 25% 50% row, 1-2 items a 33% 66% row, 1-3 25% 75%

.flex-grow-0 Flex Grow 0
Item 1 Item 2 Item 3
.flex-grow-1 Flex Grow 1
Item 1 Item 2 Item 3
.flex-grow-2 Flex Grow 2
Item 1 Item 2 Item 3
.flex-grow-3 Flex Grow 3
Item 1 Item 2 Item 3
.flex-grow-4 Flex Grow 4
Item 1 Item 2 Item 3
.flex-grow-6 Flex Grow 6
Item 1 Item 2 Item 3

Implementation example:

<div class="flex">
	<div class="flex-grow-1">Flex Grow 1</div>
</div>

Options:

<div class="flex-grow-0">Flex Grow 0</div>
<div class="flex-grow-1">Flex Grow 1</div>
<div class="flex-grow-2">Flex Grow 2</div>
<div class="flex-grow-3">Flex Grow 3</div>
<div class="flex-grow-4">Flex Grow 4</div>
<div class="flex-grow-5">Flex Grow 5</div>
<div class="flex-grow-6">Flex Grow 6</div>