This document provides information about Flexbox layout in CSS. It defines Flexbox as allowing containers to alter the height, width, and order of items for responsive layouts. It describes various Flexbox properties like flex-direction, flex-wrap, justify-content, align-items, order, flex-grow, flex-shrink and flex-basis that control the layout of flex items within a flex container. Examples and screenshots are included to illustrate how each property works.

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