Flexbox

The flexbox utilities can be used to put together a flexbox grid.

Class reference

Class
Output
.flex
display: flex;
.flex-inline
display: inline-flex;
.flex-row
flex-direction: row;
.flex-column
flex-direction: column;
.flex-row-reverse
flex-direction: row-reverse;
.flex-column-reverse
flex-direction: column-reverse;
.flex-nowrap
flex-wrap: nowrap;
.flex-wrap
flex-wrap: wrap;
.flex-wrap-reverse
flex-wrap: wrap-reverse;
.flex-auto
flex: 1 1 auto;
.flex-1
flex: 1 1 0%;
.flex-none
flex: none;
.flex-no-shrink
flex-shrink: 0;
.flex-first
order: -1;
.flex-last
order: 99;
.flex-stretch
align-items: stretch;
.flex-top
align-items: flex-start;
.flex-middle
align-items: center;
.flex-bottom
align-items: flex-end;
.flex-wrap-stretch
align-content: stretch;
.flex-wrap-top
align-content: flex-start;
.flex-wrap-middle
align-content: flex-center;
.flex-wrap-bottom
align-content: flex-end;
.flex-wrap-between
align-content: space-between;
.flex-wrap-around
align-content: space-around;
.flex-start, .flex-left
justify-content: flex-start;
.flex-end, .flex-right
justify-content: flex-end;
.flex-center
justify-content: center;
.flex-between
justify-content: space-between;
.flex-around
justify-content: space-around;

Flex Direction

Use .flex-row to position flex items horizontally from left to right.

1
2
3
<div class="flex flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-row-reverse to position flex items horizontally in the opposite direction.

1
2
3
<div class="flex flex-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-column to position flex items vertically from top to bottom.

1
2
3
<div class="flex flex-column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-column-reverse to position flex items vertically in the opposite direction.

1
2
3
<div class="flex flex-column-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flex Wrap

Use .flex-no-wrap to prevent flex items from wrapping.

1
2
3
<div class="flex flex-nowrap">
  <div class="w-30p flex-none">1</div>
  <div class="w-40p flex-none">2</div>
  <div class="w-30p flex-none">3</div>
</div>

Use .flex-wrap to allow flex items to wrap normally.

1
2
3
<div class="flex flex-wrap">
  <div class="w-30p flex-none">1</div>
  <div class="w-40p flex-none">2</div>
  <div class="w-30p flex-none">3</div>
</div>

Use .flex-wrap-reverse to wrap flex items in the reverse direction.

1
2
3
<div class="flex flex-wrap-reverse">
  <div class="w-30p flex-none">1</div>
  <div class="w-40p flex-none">2</div>
  <div class="w-30p flex-none">3</div>
</div>

Flex

Flex is the shorthand for flex-grow, flex-shrink and flex-basis combined.

Use .flex-auto to allow a flex item to grow and shrink in accordance to it's initial size.

Default behaviour
Short
Medium length
Larger in length when compared
Flex auto
Short
Medium length
Larger in length when compared
<div class="flex">
  <div class="flex-auto">...</div>
  <div class="flex-auto">...</div>
  <div class="flex-auto">...</div>
</div>

Use .flex-1 to allow a flex item to grow and shrink as needed irrespective of it's intital size.

Default behaviour
Short
Medium length
Larger in length when compared
Flex 1
Short
Medium length
Larger in length when compared
<div class="flex">
  <div class="flex-1">...</div>
  <div class="flex-1">...</div>
  <div class="flex-1">...</div>
</div>

Use .flex-none to prevent a flex item from either growing or shrinking.

This item can grow or shrink as needed
This item cannot grow or shrink
This item can grow or shrink as needed
<div class="flex">
  <div class="flex-1">...</div>
  <div class="flex-none">...</div>
  <div class="flex-1">...</div>
</div>

Use .flex-no-shrink to prevent a flex item from shrinking.

This item can grow or shrink as needed
This item cannot shrink
This item can grow or shrink as needed
<div class="flex">
  <div class="flex-none">...</div>
  <div class="flex-no-shrink">...</div>
  <div class="flex-1">...</div>
</div>

Order

Use .flex-first and .flex-last to render flex items in a different order than their natural DOM order.

1
2
3
<div class="flex flex-row">
  <div>1</div>
  <div class="flex-last">2</div>
  <div class="flex-first">3</div>
</div>

Align Items

Used to control how flex items are position along the container's cross/vertical/(Y) axis.

Use .flex-stretch to stretch items to fill the container's width.

1
2
3
<div class="flex flex-row flex-stretch">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
</div>

Use .flex-top to align items to the start of the container's cross/vertical axis.

1
2
3
<div class="flex flex-row flex-top">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
</div>

Use .flex-middle to align items to the start of the container's cross/vertical axis.

1
2
3
<div class="flex flex-row flex-middle">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
</div>

Use .flex-bottom to align items to the start of the container's cross/vertical axis.

1
2
3
<div class="flex flex-row flex-bottom">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
</div>

Align Content

Used to control how lines are positioned in multi-line flex containers.

Use .flex-wrap-stretch for the lines to stretch and take up the remaining space.

1
2
3
4
<div class="flex flex-wrap flex-wrap-stretch">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
  <div class="flex-1">4</div>
</div>

Use .flex-wrap-top to pack lines at the start of cross/vertical axis in a flex container.

1
2
3
4
<div class="flex flex-wrap flex-wrap-top">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
  <div class="flex-1">4</div>
</div>

Use .flex-wrap-middle to pack lines at the center of cross/vertical axis in a flex container.

1
2
3
4
<div class="flex flex-wrap flex-wrap-middle">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
  <div class="flex-1">4</div>
</div>

Use .flex-wrap-bottom to pack lines at the end of cross/vertical axis in a flex container.

1
2
3
4
<div class="flex flex-wrap flex-wrap-bottom">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
  <div class="flex-1">4</div>
</div>

Use .flex-wrap-between to distribute lines in a way that there is equal amount of space between each line.

1
2
3
4
<div class="flex flex-wrap flex-wrap-between">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
  <div class="flex-1">4</div>
</div>

Use .flex-wrap-around to distribute lines in a way that there is equal amount of space around each line.

1
2
3
4
<div class="flex flex-wrap flex-wrap-around">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1">3</div>
  <div class="flex-1">4</div>
</div>

Justify Content

Used to control how flex items are positioned along the container's main/horizontal/(X) axis.

Use .flex-start or .flex-left to justify items against the start of the container's main/horizontal axis.

1
2
3
<div class="flex flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-end or .flex-right to justify items against the end of the container's main/horizontal axis.

1
2
3
<div class="flex flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-center to justify items along the center of the container's main/horizontal axis.

1
2
3
<div class="flex flex-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-between to justify items along the container's main/horizontal axis in a way that there is an equal amount of space between each item.

1
2
3
<div class="flex flex-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Use .flex-around to justify items along the container's main/horizontal axis in a way that there is an equal amount of space around each item.

1
2
3
<div class="flex flex-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Back to: Display
See next: Float

CONTENTS