This document provides an overview of CSS Flexbox including: 1) An introduction to Flexbox and its advantages over other layout methods like floats and grids. 2) Examples of how to use Flexbox properties to control layout including flex-direction, flex-wrap, justify-content, align-items and more. 3) Real world use cases demonstrating how Flexbox can be used for tasks like vertical alignment, equal height columns, and responsive layouts.

1. The Power of CSS Flexbox
Gaurav Gupta
@FrshBakedPixels #edui_flexbox

2. Slides
tiny.cc/flexboxslides
@FrshBakedPixels #edui_flexbox

3. About me
IT Analyst
Division of Learning Innovation and Student Success
Virginia Commonwealth University

4. @FrshBakedPixels
#edui_flexbox

5. Evolution of layout methods
@FrshBakedPixels #edui_flexbox

6. Table Div + Float Grid Responsive
Web Design
Flexbox

7. float:left float: right
Table Div + Float Grid Responsive
Web Design
Flexbox

8. Table Div + Float Grid Responsive
Web Design
Flexbox

9. 12 columns
4 columns
6 columns 6 columns
4 columns 4 columns
Table Div + Float Grid Responsive
Web Design
Flexbox

10. Media Queries
1
2 3
@media (max-width: 600px) {
/*CSS for small screens*/
}
Table Div + Float Grid Responsive
Web Design
Flexbox

11. 1
2
3
@media (max-width: 600px) {
/*CSS for small screens*/
}
Table Div + Float Grid Responsive
Web Design
Flexbox
Media Queries

12. The CSS3 Flexible Box, or flexbox, is a
layout mode providing for the arrangement
of elements on a page such that the
elements behave predictably when the
page layout must accommodate different
screen sizes and different display devices.
- Mozilla Developer Network
“
Table Div + Float Grid Responsive
Web Design
Flexbox

13. Basics
@FrshBakedPixels #edui_flexbox

14. Demo code
tiny.cc/flexboxdemo
@FrshBakedPixels #edui_flexbox

15. <div class="parent">
<div class="child box1">1</div>
<div class="child box2">2</div>
<div class="child box3">3</div>
<div class="child box4">4</div>
<div class="child box5">5</div>
</div>

16. 1
2
3
4
5

17. 1 2 3 4 5
.parent { display:flex }

18. 1 2 3 4 5
Main Axis
CrossAxis

19. 1 2 3 4 5
Main Axis
CrossAxis
.parent {
display: flex;
flex-direction: row; /*default*/
}

20. 1
2
3
4
5
.parent {
display: flex;
flex-direction: column;
}

21. 12345
.parent {
display: flex;
flex-direction: row-reverse;
}

22. 1
2
3
4
5
.parent {
display: flex;
flex-direction: column-reverse;
}

23. Wrapping items
@FrshBakedPixels #edui_flexbox

24. 1 2 3 4 5

25. 1 2 3 4 5 6 7 8 9 0

26. 1 2 3 4 5 6 7
8 9 0
.parent {
display: flex;
flex-wrap: wrap;
}

27. 1 2 3 4 5 6 7
8 9 0
.parent {
display: flex;
flex-wrap: wrap-reverse;
}

28. 1
2
3
4
5
6
7
8
9
0
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

29. Aligning items
@FrshBakedPixels #edui_flexbox

30. justify-content
aligns items along
main axis
align-content aligns rows of items
along cross axis
align-items aligns items in a single
row along cross axis

31. justify-content
aligns items along
main axis
align-content aligns rows of items
along cross axis
align-items aligns items in a single
row along cross axis

32. 1 2 3 4 5
.parent {
display: flex;
justify-content: flex-start; /*default*/
}

33. 1 2 3 4 5
.parent {
display: flex;
justify-content: flex-end;
}

34. 1 2 3 4 5
.parent {
display: flex;
justify-content: center;
}

35. 1 2 3 4 5
.parent {
display: flex;
justify-content: space-between;
}

36. 1 2 3 4 5
.parent {
display: flex;
justify-content: space-around;
}

37. justify-content
aligns items along
main axis
align-content aligns rows of items
along cross axis
align-items aligns items in a single
row along cross axis

38. 1 2 3
4 5 6
7 8 9
.parent {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

39. 1 2 3
4 5 6
7 8 9
.parent {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}

40. 1 2 3
4 5 6
7 8 9
.parent {
display: flex;
flex-wrap: wrap;
align-content: center;
}

41. 1 2 3
4 5 6
7 8 9
.parent {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

42. 1 2 3
4 5 6
7 8 9
.parent {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}

43. 1 2 3
4 5 6
7 8 9
.parent {
display: flex;
flex-wrap: wrap;
align-content: stretch; /*default*/
}

44. justify-content
aligns items along
main axis
align-content aligns rows of items
along cross axis
align-items aligns items in a single
row along cross axis

45. .parent {
display: flex;
align-items: flex-start;
}
Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit.
Nullam sit amet
diam feugiat
ullamcorper nunc
vel, sodales mi.
Aliquam tempor
enim at arcu
finibus, et
consectetur mi
blandit. Vestibulum
semper commodo
tempor. Ut
venenatis euismod
Proin ex lectus,
pellentesque eget
est sit amet,
euismod maximus
arcu
Pellentesque
habitant morbi
tristique senectus
et netus et
malesuada fames
ac turpis egestas.
Cras eu elementum
dui. In feugiat
feugiat turpis.

46. .parent {
display: flex;
align-items: flex-end;
}
Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit.
Nullam sit amet
diam feugiat
ullamcorper nunc
vel, sodales mi.
Aliquam tempor
enim at arcu
finibus, et
consectetur mi
blandit. Vestibulum
semper commodo
tempor. Ut
venenatis euismod
Proin ex lectus,
pellentesque eget
est sit amet,
euismod maximus
arcu
Pellentesque
habitant morbi
tristique senectus
et netus et
malesuada fames
ac turpis egestas.
Cras eu elementum
dui. In feugiat
feugiat turpis.

47. .parent {
display: flex;
align-items: center;
}
Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit.
Nullam sit amet
diam feugiat
ullamcorper nunc
vel, sodales mi.
Aliquam tempor
enim at arcu
finibus, et
consectetur mi
blandit. Vestibulum
semper commodo
tempor. Ut
venenatis euismod
Proin ex lectus,
pellentesque eget
est sit amet,
euismod maximus
arcu
Pellentesque
habitant morbi
tristique senectus
et netus et
malesuada fames
ac turpis egestas.
Cras eu elementum
dui. In feugiat
feugiat turpis.

48. Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit.
Nullam sit amet
diam feugiat
ullamcorper nunc
vel, sodales mi.
Aliquam tempor
enim at arcu
finibus, et
consectetur mi
blandit. Vestibulum
semper commodo
tempor. Ut
venenatis euismod
Proin ex
lectus,
pellentesque
eget
Pellentesque
habitant morbi
tristique senectus
et netus et
malesuada fames
ac turpis egestas.
Cras eu elementum
dui. In feugiat
feugiat turpis.
.parent {
display: flex;
align-items: baseline;
}

49. .parent {
display: flex;
align-items: stretch; /*default*/
}
Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit.
Nullam sit amet
diam feugiat
ullamcorper nunc
vel, sodales mi.
Aliquam tempor
enim at arcu
finibus, et
consectetur mi
blandit. Vestibulum
semper commodo
tempor. Ut
venenatis euismod
Proin ex lectus,
pellentesque eget
est sit amet,
euismod maximus
arcu
Pellentesque
habitant morbi
tristique senectus
et netus et
malesuada fames
ac turpis egestas.
Cras eu elementum
dui. In feugiat
feugiat turpis.

50. .parent {
display: flex;
align-items: stretch;
}
.box3 {
align-self: flex-end; /*override individual child*/
}
Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit.
Nullam sit amet
diam feugiat
ullamcorper nunc
vel, sodales mi.
Aliquam tempor
enim at arcu
finibus, et
consectetur mi
blandit. Vestibulum
semper commodo
tempor. Ut
venenatis euismod
Proin ex lectus,
pellentesque eget
est sit amet,
euismod maximus
arcu
Pellentesque
habitant morbi
tristique senectus
et netus et
malesuada fames
ac turpis egestas.
Cras eu elementum
dui. In feugiat
feugiat turpis.

51. Changing item order
@FrshBakedPixels #edui_flexbox

52. 1 2 3 4 5
.child { order: 0 } /*default*/

53. 1 2 345
.box3 { order: 1 }
.box5 { order: -1 }

54. 1 2 345
.box3 { order: 1 }
.box5 { order: -1 }
order: -1 0 0 0 1

55. “Flexing” items
@FrshBakedPixels #edui_flexbox

56. .child {
flex: 1 1 200px;
}

57. .child {
flex: 1 1 200px;
}
flex-basis
flex-grow
flex-shrink
flex
is applied to
child elements

58. flex-basis baseline width auto
flex-grow proportion of extra width an item
will get if extra space available
0
flex-shrink proportion of width it will give up
if needed
1

59. .child {flex: 0 1 auto} /*default*/
≫

60. .child {flex: 1 0 auto}
flex-grow flex-shrink

61. .child {flex: 1 0 10%}
.child {flex: 1 0 20%}
.child {flex: 1 0 25%}

62. .child {flex: 1 0 25%}
.child {flex: 1 1 25%}

63. .child {flex: 1 0 auto}
.box1 {flex: 10 0 auto}
.child {flex: 1 0 auto}
.box1 {flex: 10 0 auto}
.box2 {flex: 10 0 auto}
≫

64. Real world examples
@FrshBakedPixels #edui_flexbox

65. Example 1:
Vertical align
@FrshBakedPixels #edui_flexbox

66. Look Ma, I'm
vertically aligned!

67. Look Ma, I'm
vertically aligned!
.parent {
display: flex;
align-items: center;
justify-content: center;
}

68. Look Ma, I'm
vertically aligned!
So am I!
.parent {
display: flex;
align-items: center;
justify-content: center;
}

69. Look Ma, I'm
vertically aligned!
So am I!
.parent {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

70. Example 2:
Equal height columns
@FrshBakedPixels #edui_flexbox

72. Columns with grid layout

73. Columns with flexbox
≫

74. .row {
display: flex;
flex-wrap: wrap;
}
.card-link {
flex: 1 0 250px;
display: flex;
flex-direction: column;
}
.button {
margin-top: auto;
}

75. Example 3:
Grid vs. Flexbox
@FrshBakedPixels #edui_flexbox

79. col-4 col-4 col-4

80. col-3 col-3 col-3 col-3

81. ? ? ? ??

82. Web app navigation

83. .parent {
display: flex;
}
.child {
flex: 1 0 10%;
}

84. .parent {
display: flex;
}
.child {
flex: 1 0 10%;
}
the CSS code stays the
same for 3, 4 or 5 items

85. Example 4:
Reordering content
@FrshBakedPixels #edui_flexbox

91. @media (max-width: 1000px) and (orientation: landscape) {
.Breadcrumbs { order: 1;}
nav { order: 2;}
footer { order: 3;}
}

92. ≫

93. ≫

94. Example 5:
Alignment Shifting Wrapping
@FrshBakedPixels #edui_flexbox

96. Source: https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/ ≫

97. .flex-title {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.flex-title .title-main {
flex-grow: 1;
}

99. Browser support
@FrshBakedPixels #edui_flexbox

100. Source: http://caniuse.com/#search=flexbox

101. .parent {
display: flex;
align-items: center;
}
.child {
flex: 0 1 auto;
}
.parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.child {
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
Browser prefixes

102. Supporting older browsers
Use fallbacks .parent {
display: table;
display: flex;
}
.child {
display: table-cell;
width: 20%;
flex: 1 0 20%;
}
Use Modernizr .no-flexbox .parent {
display: table;
}
.flexbox .parent {
display: flex;
}

103. Resources
• Flexbox cheat sheet
https://css-tricks.com/snippets/css/a-guide-to-flexbox
• Using Flexbox: Mixing Old and New for the Best Browser
Support
https://css-tricks.com/using-flexbox/
• Video: Enhancing Responsiveness with Flexbox
https://vimeo.com/124796320
• Autoprefixer
https://github.com/postcss/autoprefixer
• Modernizr
http://modernizr.com/