Slides from June's SacWebDev Meetup. This was a 101 dive into flexbox presented by Mark Aplet

1. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
1
Understanding
Flexbox

2. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
2
Mark Aplet
 @visual28
 markaplet@symsoftsolutions.com
Front-End Web Developer at SymSoft Solution

3. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
3
FlexboxLayout
 Main Idea: allow the container to alter it’s items height
width and order of appearance for better responsive
layouts
 Direction Agnostic
 Spotty support since 2009
 Candidate Recommendation since 2012
 Requires vendor prefix even in modern browsers
 Polyfill support not so great

4. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
4
FlexboxModule
Main Size
CrossSize
CrossAxis
Main Axis
Cross Start
Cross End
Main Start Main End
1 2
Flex Item
Flex Container
Flex Item

5. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
5
FlexContainer
 display: block
 display: inline
 display: inline-block
.container {
display: flex; /* inline-flex */
}

6. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
6
FlexDirection
 Determines the axis orientation
 Defaults to row
 row, row-reverse, column,
column-reverse
.container {
flex-direction: row;
}
1 2 3
1
2
3
3
2
1
3 2 1

7. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
7
FlexWrap
 Tries to fit on one line by default
 Defaults to nowrap
 nowrap | wrap | wrap-reverse
.container {
flex-wrap: wrap;
}
1
3
2

8. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
8
FlexFlow
 This is a shorthand flex-direction and flex-wrap properties,
which together define the flex container's main axis and
cross axes. Default is row nowrap
.container {
flex-flow: row-reverse wrap;
}

9. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
9
JustifyContent
 Defines the alignment along the main axis
 Helps distribute remaining free space around items
 Defaults to flex-start
 flex-start, flex-end, center,
space-between, space-around
.container {
Justify-content: flex-start;
}

10. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
10
JustifyContent
1 32flex-start
1 32flex-end
1 32center
1 32space-between
1 32space-around

11. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
11
JustifyContent
1 32space-around

12. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
12
AlignItems
 Defines the alignment along the cross axis
• Vertical alignment
 Think of it as justify-content for the cross axis
 Defaults to flex-start
 flex-start, flex-end, center, baseline, stretch
.container {
align-items: flex-start;
}

13. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
13
AlignItems
1 2 3 4
flex-start
1
2 3 4
flex-end
1 2 3 4center 1 2 3 4stretch
baseline
text text text text

14. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
14
AlignContent
 Defines the distribution of space along the cross axis
 Similar to justify-content for the cross axis
 Defaults to flex-start
 flex-start, flex-end, center, baseline, stretch
.container {
align-content: flex-start;
}

15. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
15
FlexItems
 Children elements of flex-container

16. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
16
Order
 Controls the order items appear in the flex-container
 Use source order by default
 Default value is 0
 Can use negative values e.g. -1
.item {
order: 1;
}
2 1 34

17. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
17
FlexGrow
 Defines the ability for a flex item to grow if necessary
 Unitless value that represents a proportion
 Dictates amount of space it should take up
 Defaults to 0
.item {
flex-grow: 1;
}

18. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
18
FlexGrow
.item:nth-child(2) {
flex-grow: 2;
}
1 1 1
1 2 1
.item {
flex-grow: 1;
}

19. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
19
FlexShrink
 Defines the ability for a flex item to shrink
if necessary
 Unitless value that represents a proportion
 Defaults to 0
.item {
flex-shrink: 1;
}

20. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
20
FlexBasis
 This defines the default size of an element before the
remaining space is distributed
 If set to 0, the extra space around content isn't factored in
 If set to auto, the extra space is distributed based on it's
flex-grow value
.item {
flex-basis: auto;
}

21. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
21
FlexBasis
short much longer short
All Space Distributed
(flex-basis:0)
1 1
short much longer short
Extra Space Distributed
(flex-basis:auto)
1 1 1 1 2 2

22. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
22
Flex
 Shorthand for flex-grow, flex-shrink and flex-basis
combined
 Recommended over setting individual properties
 Uses typical shorthand notaion
.item {
flex: 1 1 auto;
}

23. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
23
Flex
/* 0 0 auto */
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

24. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
24
AlignSelf
 Allows for individual items to be overridden
.item {
flex-align: flex-start;
}
1 2
3
4
flex-start
flex-end
.item:nth-child(3) {
align-self: flex-end;
}

25. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
25
LiveDemo