A FIELD GUIDE TO

FLEXBOX

by Joni Trythall
THIS LIL GUIDE BELONGS TO

FAVORITE FRUIT
A FIELD GUIDE TO

FLEXBOX

by Joni Trythall
This lil visual guide was created by Joni
Trythall with love and perhaps too
much enthusiasm.

@jonitrythall
jonibologna.com
[email protected]

News and updates on site:

flexboxfieldguide.com

Printed in the USA

© 2017 Joni Trythall

All rights reserved

Cherries are the superior fruit.

 Outline

Foundational Concepts 6
Activate Powers 9
Container Declarations 11
Rows 12
Columns 13
Main axis location 14
Wrapping 17
Cross axis location 19
Multi-line alignment 22

Item Declarations 26
Order 27
Grow 28
Shrink 29
Alignment 30

Additional Resources 34
Foundational
Concepts

Outline
 flex items

flex container

Foundational Concepts 7

Outline
 8
cross axis
cross axis
start

main
axis

Foundational Concepts
cross axis
end
main axis start main axis
end

Outline
Activate
Powers

Outline
 display: flex;
OR

display: inline-flex;

On flex container.

10 Activate Powers

Outline
 Container
Declarations

Outline
Are rows or columns desired?

Rows
row is the default value.

flex-direction: row;

OR

flex-direction: row-reverse;

12 Container Declarations

Outline
Are rows or columns desired?

Columns

flex-direction: column;

OR

flex-direction: column-reverse;

Container Declarations 13

Outline
Should items be located at the
beginning of the main axis?

YES, beginning
This is the default behavior.

justify-content: flex-start;

14 Container Declarations

Outline
Should items be located at the
beginning of the main axis?

NO, other

justify-content: flex-end;

OR

justify-content: center;

OR

Container Declarations 15

Outline
Should items be located at the
beginning of the main axis?

NO, other

justify-content: space-between;

OR

justify-content: space-around;

16 Container Declarations

Outline
Should all items be on one line or
move to another when adjusting
the viewport?

One line
This is the default behavior.

flex-wrap: nowrap;

Container Declarations 17

Outline
Should all items be on one line or
move to another when adjusting
the viewport?

Move to another
flex-wrap: wrap;

OR

flex-wrap: wrap-reverse;

18 Container Declarations

Outline
How should items be laid out on
the cross axis?

Stretched
This is the default behavior.

align-items: stretch;

Container Declarations 19

Outline
How should items be laid out on
the cross axis?

Not stretched

align-items: flex-start;

OR
align-items: flex-end;

OR

20 Container Declarations

Outline
How should items be laid out on
the cross axis?

Not stretched

align-items: center;

OR

align-items: baseline;

Container Declarations 21

Outline
How should multiple lines of
content be aligned?

Stretched
This is the default behavior.

align-content: stretch;

22 Container Declarations

Outline
How should multiple lines of
content be aligned?

Not stretched

align-content: flex-start;

OR

align-content: flex-end;

OR

Container Declarations 23

Outline
How should multiple lines of
content be aligned?

Not stretched

align-content: center;

OR
align-content: space-between;

OR

24 Container Declarations

Outline
How should multiple lines of
content be aligned?

Not stretched

align-content: space-around;

Container Declarations 25

Outline
 Item
Declarations

Outline
Does the order of the items
need to change?

NO
No need to do anything.

YES

order: <whole number>;

.grapes {order: 1;}

.apple {order: 2;}
.orange {order: 3;}

Item Declarations 27

Outline
Do some items need to grow if
necessary?

NO
No need to do anything.

YES

flex-grow: <number>;

.apple {flex-grow: 1;}

.orange {flex-grow: 1;}
.grapes {flex-grow: 2;}
.cherries {flex-grow: 1;}

28 Item Declarations

Outline
Do some items need to shrink if
necessary?

NO
No need to do anything.

YES
flex-shrink: <number>;

.apple {flex-shrink: 2;}

Use flex-basis to define a starting width or

height in relation to grow/shrink.

flex-basis: <positive value>;

Item Declarations 29

Outline
Do any items need to be aligned
differently?

NO
No need to do anything.

YES
align-self: flex-start;

.grapes {
align-self: flex-start;
}

OR

30 Item Declarations

Outline
Do any items need to be aligned
differently?

YES

align-self: flex-end;

OR

align-self: center;

OR

Item Declarations 31

Outline
Do any items need to be aligned
differently?

YES

align-self: baseline;

.grapes {
align-self: baseline;
}

OR

32 Item Declarations

Outline
Do any items need to be aligned
differently?

YES

align-self: stretch;

.grapes {
align-self: stretch;
}

Item Declarations 33

Outline
 Additional
Resources
On getting started
Support: bitly.com/fgflex1
CSS-Tricks Complete Guide: bitly.com/fgflex2
Flexbox Froggy: bitly.com/fgflex3
Gif Guide: bitly.com/fgflex4
Cheatsheet: bitly.com/fgflex5
Base demo: bitly.com/fgflex6
What the Flexbox?!: bitly.com/fgflex7

On flex grow, shrink, basis

What the Flexbox #11: bitly.com/fgflex8

Common scenarios
Flexbox Fridays: bitly.com/fgflex9
Card layout: bitly.com/fgflex10
Inputs: bitly.com/fgflex11

34 Additional Resources

Outline
“ I can never remember the flexbox
properties, so I’m thrilled to have A Field
Guide to Flexbox by my side. Joni’s
illustrations are equal parts delightful and
easy to follow, making it my new go-to
resource.”

— Katy DeCorah, web developer

“ This handy guide is a wonderful resource,

especially for a visual learner, like myself.
If i had a guide like this for all web design
concepts I’d be golden.”

— Shanise Barona, web developer

“ I like the watermelon the best. They are

tasty tasty.”

— Ben Trythall, 5 years old

flexboxfieldguide.com