Flexbox

Source Edit this page

Utilities for controlling flexbox.

Flex Container

Use .d-flex display utility to create flexbox container.

note
For complete flexbox explanation refer to CSS tricks flexbox guide.
Class Properties
d-flex display: flex;
d-inline-flex display: inline-flex;
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Inline Flex

Inline flex container
<div class="d-inline-flex">
	<div class="box bg-secondary--xlight p-5">Inline flex container</div>
</div>

Flex Direction

Use these classes to change the direction of flex items in the container.

Class Properties
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-column flex-direction: column;
flex-column-reverse flex-direction: column-reverse;

Row

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Row Reverse

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex  flex-row-reverse">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Column

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex  flex-column">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Column Reverse

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex  flex-column-reverse">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Flex Wrap

Use wrap utility classes to control if items wrap in single or multiple line.

Class Properties
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;

No Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-nowrap">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div>

Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div>

Wrap Reverse

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap-reverse">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div>

Justify Content

Use these classes to align flex and grid items along the main axis of container.

Class Properties
flex-justify-start justify-content: flex-start;
flex-justify-end justify-content: flex-end;
flex-justify-center justify-content: center;
flex-justify-between justify-content: space-between;
flex-justify-around justify-content: space-around;
flex-justify-evenly justify-content: spaxe-evenly;

Start

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-justify-start">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

End

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-justify-end">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Center

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-justify-center">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Space Between

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-justify-between">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Space Around

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-justify-around">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Space Evenly

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-justify-evenly">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Align Items

Use these classes to align flex and grid items along the cross axis of container.

Class Properties
flex-items-start align-items: flex-start;
flex-items-end align-items: flex-end;
flex-items-center align-items: center;
flex-items-baseline align-items: baseline;
flex-items-stretch align-items: stretch;

Start

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-items-start">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

End

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-items-end">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Center

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-items-center">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Baseline

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-items-baseline">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Stretch

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-item-stretch">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Align Content

Use these classes to align rows in multirow flex and grid items.

info
This property works with multi rows flex container with .flex-warp.
Class Properties
flex-content-start align-content: flex-start;
flex-content-end align-content: flex-end;
flex-content-center align-content: center;
flex-content-between align-content: space-between;
flex-content-around align-content: space-around;
flex-content-evenly align-content: space-evenly;
flex-content-stretch align-content: stretch;

Start

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-start">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div>

End

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-end">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div>

Center

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-center">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div

Space Between

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-between">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div

Space Around

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-around">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div

Space Evenly

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-evenly">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div

Stretch

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
<div class="d-flex flex-wrap flex-content-stretch">
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 1</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 3</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 4</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 5</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 6</div>
	<div class="box bg-secondary--xlight width-20 p-5"> Flex item 7</div>
</div

Align Self

Use these classes to align individual flex and grid items along the cross axis of container.

Class Properties
flex-self-auto align-self: auto;
flex-self-start align-self: flex-start;
flex-self-end align-self: flex-end;
flex-self-center align-self: center;
flex-self-baseline align-self: baseline;
flex-self-stretch align-self: stretch;

Auto

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-items-start">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-self box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Start

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-items-start">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-self-start box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

End

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-self-end box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Center

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-self-center box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Baseline

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-self-baseline box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Stretch

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-self-stretch box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Flex Items

Use these classes to grow or shrink flex children.

Class Properties
flex-auto flex: auto;
flex-initial flex: initial;
flex-1 flex: 1;
flex-grow-1 flex-grow: 1;
flex-grow-0 flex-grow: 0;
flex-shrink-1 flex-shrink: 1;
flex-shrink-0 flex-shrink: 0;
flex-none flex: none;

Auto

Use flex-auto to allow a flex item to grow and shrink, taking initial size into account.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-auto box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Initial

Use flex-inital to allow a flex item to shrink but not grow, taking initial size into account.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-initial box bg-secondary--light p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Flex 1

Use flex-1 to allow a flex item to shrink and grow as needed, taking up all the needed space.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-1 box bg-secondary--light p-5"> Flex item 2</div>
	<div class="flex-1 box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Flex Grow

Use flex-grow-1 to allow a flex item to grow taking up all the space.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="flex-grow-1 box bg-secondary--light p-5"> Flex item 3</div>
</div>

Flex Grow 0

Use flex-grow-0 to prevent flex item from growing.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="flex-grow-0 box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Flex Shrink

Use flex-shrink-1 to allow a flex item to shrink when needed.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="flex-shrink-1 box bg-secondary--light p-5 width-20"> Flex item 3</div>
</div>

Flex Shrink 0

Use flex-shrink-0 to prevent flex item from shrinking.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="flex-shrink-0 box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Flex None

Use flex-none to prevent flex item from shrinking and growing.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-1 box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="flex-none width-20 box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Order

Use these classes change the visual order of flex items.

Class Properties
order-0 order: 0;
order-1 order: 1;
order-2 order: 2;
order-3 order: 3;
order-4 order: 4;
order-5 order: 5;
order-first order: -999;
order-last order: 999;
order-none order: inherit;
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
	<div class="flex-order-3 box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="flex-order-1 box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="flex-order-2 box bg-secondary--xlight p-5"> Flex item 3</div>
</div>

Gap

For gap see spacing utilities.

Resposive Flexbox Utilities

Use d-{breakpoint}-{property} for display.

Use flex-{breakpoint}-{property} for responsive variants like flex-md-column, flex-sm-grow-1.

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-sm-column">
	<div class="box bg-secondary--xlight p-5">Flex item 1</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 2</div>
	<div class="box bg-secondary--xlight p-5"> Flex item 3</div>
</div>