a field guide to flexbox - joni bologna · i can never remember the flexbox properties, so i’m...
TRANSCRIPT
![Page 1: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/1.jpg)
A FIELD GUIDE TO
FLEXBOX
by Joni Trythall
![Page 2: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/2.jpg)
THIS LIL GUIDE BELONGS TO
FAVORITE FRUIT
![Page 3: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/3.jpg)
![Page 4: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/4.jpg)
![Page 5: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/5.jpg)
A FIELD GUIDE TO
FLEXBOX
by Joni Trythall
![Page 6: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/6.jpg)
This lil visual guide was created by Joni Trythall with love and perhaps too much enthusiasm.
News and updates on site: flexboxfieldguide.com
Printed in the USA
© 2017 Joni TrythallAll rights reserved
Cherries are the superior fruit.
![Page 7: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/7.jpg)
Outline
Foundational Concepts Activate PowersContainer Declarations Rows Columns Main axis location Wrapping Cross axis location Multi-line alignment
Item Declarations Order Grow Shrink Alignment
Additional Resources
121314171922
6 911
2627282930
34
![Page 8: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/8.jpg)
Foundational
Concepts
Outline
![Page 9: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/9.jpg)
flex container
flex items
Foundational Concepts 7
Outline
![Page 10: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/10.jpg)
8 Foundational Concepts
mai
n a
xis
cros
s axi
s cr
oss a
xis
star
t
cros
s axi
s e
ndm
ain
axis
star
tm
ain
axis
en
d
Outline
![Page 11: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/11.jpg)
Activate
Powers
Outline
![Page 12: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/12.jpg)
display: flex;
On flex container.
OR
display: inline-flex;
10 Activate Powers
Outline
![Page 13: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/13.jpg)
Container
Declarations
Outline
![Page 14: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/14.jpg)
Are rows or columns desired?
Rows
flex-direction: row;
flex-direction: row-reverse;
OR
12 Container Declarations
row is the default value.
Outline
![Page 15: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/15.jpg)
flex-direction: column;
flex-direction: column-reverse;
OR
Are rows or columns desired?
Columns
Container Declarations 13
Outline
![Page 16: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/16.jpg)
Should items be located at the beginning of the main axis?
YES, beginningThis is the default behavior.
justify-content: flex-start;
14 Container Declarations
Outline
![Page 17: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/17.jpg)
Should items be located at the beginning of the main axis?
NO, other
justify-content: flex-end;
justify-content: center;
OR
OR
Container Declarations 15
Outline
![Page 18: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/18.jpg)
justify-content: space-between;
justify-content: space-around;
OR
Should items be located at the beginning of the main axis?
NO, other
16 Container Declarations
Outline
![Page 19: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/19.jpg)
Should all items be on one line or move to another when adjusting the viewport?
One lineThis is the default behavior.
flex-wrap: nowrap;
Container Declarations 17
Outline
![Page 20: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/20.jpg)
Should all items be on one line or move to another when adjusting the viewport?
Move to another
flex-wrap: wrap;
flex-wrap: wrap-reverse;
OR
18 Container Declarations
Outline
![Page 21: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/21.jpg)
How should items be laid out on the cross axis?
Stretched This is the default behavior.
align-items: stretch;
Container Declarations 19
Outline
![Page 22: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/22.jpg)
How should items be laid out on the cross axis?
Not stretched
align-items: flex-start;
align-items: flex-end;
OR
OR
20 Container Declarations
Outline
![Page 23: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/23.jpg)
How should items be laid out on the cross axis?
Not stretched
align-items: center;
align-items: baseline;
OR
Container Declarations 21
Outline
![Page 24: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/24.jpg)
How should multiple lines of content be aligned?
align-content: stretch;
This is the default behavior.
Stretched
22 Container Declarations
Outline
![Page 25: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/25.jpg)
How should multiple lines of content be aligned?
Not stretched
align-content: flex-start;
align-content: flex-end;
OR
OR
Container Declarations 23
Outline
![Page 26: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/26.jpg)
How should multiple lines of content be aligned?
Not stretched
align-content: center;
align-content: space-between;
OR
OR
24 Container Declarations
Outline
![Page 27: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/27.jpg)
How should multiple lines of content be aligned?
Not stretched
align-content: space-around;
Container Declarations 25
Outline
![Page 28: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/28.jpg)
Item
Declarations
Outline
![Page 29: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/29.jpg)
Does the order of the items need to change?
NONo need to do anything.
order: <whole number>;
YES
.grapes {order: 1;}
.apple {order: 2;}
.orange {order: 3;}
Item Declarations 27
Outline
![Page 30: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/30.jpg)
Do some items need to grow if necessary?
NONo need to do anything.
flex-grow: <number>;
YES
.apple {flex-grow: 1;}
.orange {flex-grow: 1;}
.grapes {flex-grow: 2;}
.cherries {flex-grow: 1;}
28 Item Declarations
Outline
![Page 31: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/31.jpg)
Do some items need to shrink if necessary?
Use flex-basis to define a starting width or height in relation to grow/shrink.
NONo need to do anything.
flex-shrink: <number>;
YES
flex-basis: <positive value>;
.apple {flex-shrink: 2;}
Item Declarations 29
Outline
![Page 32: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/32.jpg)
Do any items need to be aligned differently?
NONo need to do anything.
YES
align-self: flex-start;
OR
.grapes { align-self: flex-start;}
30 Item Declarations
Outline
![Page 33: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/33.jpg)
Do any items need to be aligned differently?
YES
align-self: center;
align-self: flex-end;
OR
OR
Item Declarations 31
Outline
![Page 34: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/34.jpg)
align-self: baseline;
OR
Do any items need to be aligned differently?
YES
.grapes { align-self: baseline;}
32 Item Declarations
Outline
![Page 35: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/35.jpg)
Do any items need to be aligned differently?
YES
.grapes { align-self: stretch;}
align-self: stretch;
Item Declarations 33
Outline
![Page 36: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/36.jpg)
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
![Page 37: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/37.jpg)
![Page 38: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/38.jpg)
![Page 39: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/39.jpg)
![Page 40: A Field Guide to Flexbox - Joni Bologna · 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](https://reader034.vdocument.in/reader034/viewer/2022042319/5f09447c7e708231d426019e/html5/thumbnails/40.jpg)
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
“
“
“