Using CSS flexbox to save your sanity

Designing responsive mobile UI's need not be hard. Here's CSS flexbox to the rescue. Presented at http://2014.cssconf.asia.

Also see the accompanying site:

- http://ricostacruz.com/newsreader-sample-layout
- https://github.com/rstacruz/newsreader-sample-layout

Transcript

1. 2 0 1 4
2. http://thenounproject.com/term/browser/16164/ As web developers, I feel that our work is taken for granted. It is a tough job.
3. teehanlax.com This is bold claim to make, yet this is what we do everyday as developers.
4. 2014 2000 1990 2010 Over the history of the web, there had been many great developments.
5. Once upon a time, the web didn’t look as impressive as today’s.
6. 2014 2000 1990 2010 At some points in history, many brilliant minds were able to come up with great standards in the web.
7. HTML4.01 Specification w3.org
8. Standardizing HTML was a monumental achievement at that time, but we did it.
9. Standardization of HTML4 1997 < >
10. 2014 2000 1990 2010
11. At some point in history, the “smartphone” came out.
12. http://thenounproject.com/term/iphone/23277/ The smartphone 2007
13. Actually, there were many other smartphones before that one.
14. http://thenounproject.com/term/iphone/23277/ The smartphone Apple iPhone 2007
15. https://www.quora.com/There-were-smartphones-before-iPhone-like-Blackberry-Nokia-N-series-etc-What-made-the-iPhone-so-successful-with-customers But they’re better off forgotten, because every other smartphone after that was following the iPhone’s lead anyway.
16. 2014 2000 1990 2010 Moving right along, there were many ideas and technologies that shaped the web as we know it today.
17. “we can use media queries to progressively enhance our work within different viewing contexts.” 2010 alistapart.com “
18. Responsive Design designed by David Waschbüsch from the Noun Project — http://thenounproject.com/term/responsive-design/64675/ Responsive design 2010
19. HTML5 Bootstrap jQuery Angular Polymer CSS3 WebGL SVG Canvas Meteor React.js Foundation Responsive Node We accomplished so much in web development in the past 15 years. Web Components
20. maps.google.com We can bring a person from one end of the country to another with the help of browser technology.
21. youtube.com We can watch TV shows, movies, and funny cat videos right in the browser.
22. atom.io We have multiple text editor / IDE environments built on browser technology.
23. Unreal Epic Citadel Even games are available in the browser.
24. There is just one problem that hasn’t been solved yet.
25. V E R T I C A L C E N T E R I N G
26. @rstacruz R I C O S T A . C R U Z
27. Using flexbox to save your sanity @rstacruz A S H O R T T A L K B Y R I C O S T A . C R U Z — o n —
28. http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?answertab=active#tab-top 14 different answers on StackOverflow
29. .container .box
30. .box { vertical-align: middle;
 } What you probably think vertical entering is like at first
31. NOPE.
32. .box { vertical-align: middle;
 } What did I do wrong?
33. .container { vertical-align: middle;
 } Maybe we can try applying it to the container element
34. YOU’RE NOT EVEN TRYING.
35. .container { vertical-align: middle;
 } What did I do wrong again?
36. .box, .container { vertical-align: middle;
 } Or you know what, why not both, I’m a bit outta options here
37. Should’ve just used Twitter Hoofstrap. Did he actually think that’ll work?
38. Is it just one line? the line-height trick Is it a fixed height? the position: absolute trick with negative margins SO… THEN USE… Can you use a container element? the display: table-cell trick Do both the container and the box have fixed heights? the fixed margin-top trick Can you use <table>? oh my goodness. really?
39. display: flex .container flex: auto .item
40. Flexbox is commonly used in UI layouts. http://cssdeck.com/labs/xbs05dza
41. IE11+ Firefox 22+ Chrome 21+ Safari 6+ iOS 7+ (4S) Android 4.4+ (Kitkat) 2012 New flexbox support http://caniuse.com/#search=flex
42. IE10+ Firefox 2+ Chrome 4+ Safari 3.1+ iOS 3.2+ (3GS) Android 2.1+ (Eclair) 2006 Old flexbox support http://caniuse.com/#search=flex
43. Flexbox is commonly used in UI layouts. http://cssdeck.com/labs/xbs05dza
44. .toolbar display: flex; .item flex: 0 0 60px; Flexbox is commonly used in UI layouts. http://cssdeck.com/labs/xbs05dza
45. .item flex: 0 0 60px Grow How much it can expand (0=none) Shrink How much it can collapse (0=none) Basis What’s its default height Flexbox is commonly used in UI layouts. http://cssdeck.com/labs/xbs05dza
46. Grow How much it can expand (0=none) Shrink How much it can collapse (0=none) Basis What’s its default height flex: 1 1 auto flex: 1 0 auto flex: 1 0 60px flex: 0 1 70% flex: 1 1 auto flex: auto = 1 1 auto flex: none = 0 0 auto
47. flex: auto 
 flex: 0 0 60px Fixed height Expandable See: http://cssdeck.com/labs/xbs05dza Same as: 1 1 auto;
48. .item margin: auto Spacing around Margins can be used to space items around. http://cssdeck.com/labs/xbs05dza
49. V E R T I C A L C E N T E R I N G
50. .container display: flex You’re not gonna believe that this actually works .box margin: auto
51. Oh yes.
52. .container justify-content: space-around Spacing around You can also use justify-content. http://cssdeck.com/labs/xbs05dza
53. .container display: flex justify-contents: space-around align-items: center Vertical center via flexbox (styling the container) .box margin: Vertically spaced Horizontally centered (assuming flex-direction: row)
55. You can change the orientation (vertical or horizontal). http://cssdeck.com/labs/xbs05dza .container flex-direction: column
56. You can change the orientation (vertical or horizontal). http://cssdeck.com/labs/xbs05dza .container flex-direction: row
57. You can also change the order of items. http://cssdeck.com/labs/xbs05dza
58. You can also change the order of items. http://cssdeck.com/labs/xbs05dza .item order: -1
59. @media (max-width: 768px) .container flex-direction: column .app-icon order: 3 Responsive menus are now easy. http://cssdeck.com/labs/xbs05dza use a vertical layout, and reorder the app icon. on mobile,
64. @media (max-width: 768px) .container flex-direction: column .app-icon order: 3 Responsive menus are now easy. http://cssdeck.com/labs/xbs05dza use a vertical layout, and reorder the app icon. on mobile,
65. github.com / rstacruz / newsreader-sample-layout twitter.com / @rstacruz
67. flex: 0 0 50px flex: 1 1 20% flex: 1 0 80% min-width: 200px max-width: 300px
68. URL for those who want to follow along twitter.com / @rstacruz github.com / rstacruz / newsreader-sample-layout
69. Responsive test github.com / rstacruz / newsreader-sample-layout @rstacruz
70. Responsive test github.com / rstacruz / newsreader-sample-layout @rstacruz
71. Responsive test github.com / rstacruz / newsreader-sample-layout @rstacruz
72. Responsive test github.com / rstacruz / newsreader-sample-layout @rstacruz
73. Nested flexboxes flex: 1 flex: 1 0 30% flex: 0 0 60px
74. .news-head flex: 0 0 -50px .news-list flex: auto Nested flexboxes
75. Works on both tablet and phone modes. github.com / rstacruz / newsreader-sample-layout @rstacruz
76. Works on both tablet and phone modes. github.com / rstacruz / newsreader-sample-layout @rstacruz
77. Works on both tablet and phone modes. github.com / rstacruz / newsreader-sample-layout @rstacruz
78. Works on both tablet and phone modes. github.com / rstacruz / newsreader-sample-layout @rstacruz
79. Works on both tablet and phone modes. github.com / rstacruz / newsreader-sample-layout @rstacruz
80. URL for those who want to follow along twitter.com / @rstacruz github.com / rstacruz / newsreader-sample-layout
81. UI layouts are (mostly) a solved problem today.
83. flex: 0 0 100px flex: 1 1 50% flex: 0 0 200px align-self: flex-end
84. flex: 0 0 100px flex: 5 flex: 3 Fixed width (100px) Flexible (5/8) Flexible (3/8)
87. UI layouts are (mostly) a solved problem today.
88. On your next mobile UI project, give flexbox a try.
89. @rstacruz R I C O S T A . C R U Z