CSS Layout Techniques - Replacing Floats with Flexbox

Overview:
CSS floats have been the primary way that we define web layout for almost the past decade. They’ve worked pretty well over the years but times are changing. flexbox is becoming the new norm for layout and solves some of the main gripes we deal with when using floats. Some of the new concepts may be a bit difficult to grasp in the beginning but in this talk we’ll focus on practical ways that flexbox is used when creating modern interfaces.

Objective:
Give you a good overview of flexbox, how it works, the layout features available, and how to tackle typical modern interface designs.

Things Audience Members Will Learn:
1. Flexbox primer on alignment, direction, orientation, and order
2. Simple to complex design patterns
3. Accessibility & markup best practices
4. Browser support and what you can start to use now

Examples
https://codepen.io/collection/DbrpKV/

Transcript

1. @BERMONPAINTER CSS LAYOUT TECHNIQUES: REPLACING FLOATS WITH FLEXBOX
2. SOLVING THE HARDEST PROBLEM THE WEB HAS EVER KNOWN…
3. SOLVING THE HARDEST PROBLEM THE WEB HAS EVER KNOWN…
4. CSS HTML body { display: flex; align-items: center; justify-content: center; } .box { width: 100px; height: 100px; }
5. THE HOLY GRAIL A BRIEF HISTORY IN LAYOUT
16. THE MEDIA OBJECT A BRIEF HISTORY IN LAYOUT
17. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
18. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
19. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
20. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
21. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
22. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
23. THE GRID A BRIEF HISTORY IN LAYOUT
27. FLEXBOX & GRID NOT COMPETING STANDARDS
30. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
31. gridbyexample.com/video/ RACHEL ANDREW @RACHELANDREW labs.jensimmons.com JEN SIMMONS @JENNSIMMONS
32. PARENT/CONTAINER PROPERTIES FLEXBOX PRIMER
33. CSs .container { display: flex; } .box { ... } 1
34. CSs .container { display: flex; flex-direction: row; } .box { ... } 1 2 3 4
35. CSs .container { display: flex; flex-direction: row-reverse; } .box { ... } 1 2 3 4
36. CSs .container { display: flex; flex-direction: column; } .box { ... } 1 2 3 4
37. CSs .container { display: flex; flex-direction: column-reverse; } .box { ... } 4 3 2 1
38. CSs .container { display: flex; flex-direction: row; flex-wrap: nowrap; } .box { ... } 1 2 3 4 5
39. CSs .container { display: flex; flex-direction: row; flex-wrap: nowrap; } .box { ... } 1 2 3 4 5 6 7
40. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; } .box { ... } 1 2 3 4 5 6 7
41. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap-reverse; } .box { ... } 1 2 3 4 5 6 7
42. CSs .container { display: flex; flex-flow: row nowrap; } .box { ... } 1 2 3 4 5
43. CSs .container { display: flex; flex-flow: row nowrap; justify-content: flex-start; } .box { ... } 1 2 3 4 5
44. CSs .container { display: flex; flex-flow: row nowrap; justify-content: flex-end; } .box { ... } 1 2 3 4 5
45. CSs .container { display: flex; flex-flow: row nowrap; justify-content: center; } .box { ... } 1 2 3 4 5
46. CSs .container { display: flex; flex-flow: row nowrap; justify-content: space-between; } .box { ... } 1 2 3 4 5
47. CSs .container { display: flex; flex-flow: row nowrap; justify-content: space-around; } .box { ... } 1 2 3 4 5
48. CSs .container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; } .box { ... } 1 2 3 4 5
49. CSs .container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .box { ... } 1 2 3 4 5
50. CSs .container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; } .box { ... } 1 2 3 4 5
51. CSs .container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .box { ... } 1 2 3 4 5
52. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; } .box { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
53. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .box { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
54. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; } .box { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
55. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .box { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
56. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: space-between; } .box { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
57. CSs .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: space-around; } .box { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
58. ELEMENT PROPERTIES FLEXBOX PRIMER
59. CSs .container { display: flex; flex-flow: row nowrap; } .box:nth-child(0) { order: 0; } .box:nth-child(1) { order: -1; } .box:nth-child(2) { order: 1; } .box:nth-child(3) { order: 0; } .box:nth-child(4) { order: 0; } 2 1 4 5 3
60. CSs .container { display: flex; flex-flow: row nowrap; } .box { flex-grow: 1; } 1 2 3 4 5
61. CSs .container { display: flex; flex-flow: row nowrap; } .box { flex-shrink: 0; } 1 2 3 4 5
62. CSs .container { display: flex; flex-flow: row nowrap; } .box { flex-grow: 1; } .box:nth-child(2) { flex-grow: 2; } 1 3 2 4 5
63. CSs .container { display: flex; flex-flow: row nowrap; } .box { flex-grow: 1; } .box:nth-child(2) { flex-basis: 200px; } 1 3 2 4 5
64. CSs .container { display: flex; flex-flow: row nowrap; } .box { flex: 1 0; } .box:nth-child(2) { flex: 1 2; } 1 3 2 4 5
65. PRACTICE FLEXBOX PRIMER
68. http://codepen.io/collection/DbrpKV
69. MAKING MORE COMPLEX LAYOUTS FLEXBOX PRIMER
70. HTML <main class="panes"> <section class="pane"> <img class="pane-image" src="image.png" /> <h2 class="pane-title">Title</h2> <p class="pane-content">Content...</p> </section> <section class="pane"> <img class="pane-image" src="image.png" /> <h2 class="pane-title">Title</h2> <p class="pane-content">Content...</p> </section> </main> Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
71. CSs .panes { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; height:100vh; text-align: center; width: 100%; } Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
72. CSs .panes { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; height:100vh; text-align: center; width: 100%; } .pane { display: flex; flex-direction: column; justify-content: center; width: 100%; } Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
73. HTML <header class="masthead"></header> <main class="container"> <article class="content"></article> <nav class="navigation"></nav> <aside class="sidebar"></aside> </main> <footer class="footer"></footer>
74. HTML html, body { height: 100%; } body { display: flex; flex-direction: column; }
75. HTML html, body { height: 100%; } body { display: flex; flex-direction: column; } .container { display: flex; flex: 1; }
76. HTML html, body { height: 100%; } body { display: flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; }
77. HTML html, body { height: 100%; } body { display: flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; }
78. HTML html, body { height: 100%; } body { display: flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; }
79. HTML html, body { height: 100%; } body { display: flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -2; } .sidebar { flex-basis: 20%; order: -1; }
80. HTML <div class="cards"> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> ... </div> Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
81. CSs .cards { display: flex; flex-flow: row wrap; } .card { flex: 1 0 25%; } .card:nth-last-child(2):nth-child(4n) { min-width: 33%; } Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
82. CSs .cards { display: flex; flex-flow: row wrap; } .card { flex: 1 0 25%; } .card:nth-last-child(2):nth-child(4n) { min-width: 33%; } Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
83. CSs .cards { display: flex; flex-flow: row wrap; } .card { flex: 1 0 25%; } .card:nth-last-child(2):nth-child(4n) { min-width: 33%; } Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
84. ACCESSIBILITY
85. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav> <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 1 2 3 DOM ORDER
86. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav> <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 2 1 3 VISUAL ORDER
87. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav> <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 1 2 3 TAB ORDER
88. BROWSER SUPPORT
89. FULL SUPPORT SAFARI : 6.1+ FIREFOX : 28+ OPERA : 12.1+ IE EDGE : 12+ CHROME : 21+
90. PARTIAL SUPPORT IE: 10-11
91. FIN OPEN OFFICE HOURS Friday mornings: 7am-9am officehours.io/people/bermonpainter TWITTER/SKYPE/EMAIL @bermonpainter KEEP IN TOUCH