Flex

Control how flex items grow and shrink

Prerequisites and tips

Know how the different display utilities work, and apply the one for flex.
flex is shorthand for the three properties flex-grow, flex-shrink and flex-basis
Some classes are applied on the parent (container) and some on the child (item)
Comprehensive guide to Flexbox.

How to use

You only need this for basic behaviour beyond the default flex: 0 1 auto. Write your own declarations to get the most out of flexbox, such as varying sizes and flexing within the same parent.

Class	Declaration	Usage
flex-1	`flex: 1 1 0%;`	Child Grow and shrink as needed, ignoring initial size. Equal-sized elements.
flex-auto	`flex: 1 1 auto;`	Child Grow and shrink as needed, taking initial size into account. Equal distribution of remaining space.
flex-none	`flex: none;`	Child Prevent from growing or shrinking.

Examples

Flex-1

A – – – –

B – – – – – – – – – – – – – –

<div class="bg-gray4 paxs flex">
<div class="examplebox flex-1">A – – – –</div>
<div class="examplebox flex-1">B – – – – – – – – – – – – – –</div>
<div class="examplebox flex-1">C</div>
</div>

Flex-auto

A – – – –

B – – – – – – – – – – – – – –

<div class="bg-gray4 paxs flex">
<div class="examplebox flex-auto">A – – – –</div>
<div class="examplebox flex-auto">B – – – – – – – – – – – – – –</div>
<div class="examplebox flex-auto">C</div>
</div>

Flex-none

A – – – –

B – – – – – – – – – – – – – –

<div class="bg-gray4 paxs flex">
<div class="examplebox flex-none">A – – – –</div>
<div class="examplebox flex-none">B – – – – – – – – – – – – – –</div>
<div class="examplebox flex-none">C</div>
</div>