Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Report
Share
•17 likes•3,481 views
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
•17 likes•3,481 views
Report
Share
Download to read offline
Handling variable or unknown content in a layout can be tricky. Our current responsive layout techniques generally have unspoken assumptions that can easily be broken by changes in content, internationalization, and a collection of other unexpected adjustments to what needs to be laid out. This talk will discuss how we can use Flexbox-driven layouts to overcome these challenges - how we can learn to stop worrying about our traditional, top-down layout techniques and love the content-driven layouts that Flexbox affords. We'll go over the key parts of the Flexbox spec that let the container respond to the content, instead of the other way around, and how we can build amazingly responsive layouts without a single media query or fixed width.
More Related Content
Viewers also liked
Viewers also liked(12)
Recently uploaded
Recently uploaded(20)
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
- 6. FLOATS 6
- 11. YES YESYES10+ only -ms in IE10 YES even in Mini! CAN I USE SAYS… 95.44% 11
- 12. PARENT RULES 12
- 18. 1 2 3 Main Axis justify-content 18
- 26. 1 2 3 Cross Axis align-items 26
- 35. CHILD RULES 35
- 38. 1 2 3 100px 20px 20px 20px 38
- 39. 1 2 3 100px 20px 20px 20px 40px of “growth” available 39
- 40. 1 2 3 flex-grow: 0; flex-grow: 0; flex-grow: 0; 40
- 41. 1 2 3 flex-grow: 1; 13px of growth flex-grow: 1; 13px of growth flex-grow: 1; 13px of growth 41
- 42. 1 2 3 flex-grow: 1; 10px of growth flex-grow: 2; 20px of growth flex-grow: 1; 10px of growth 42
- 43. 1 2 3 flex-grow: 0; 0px of growth flex-grow: 1; 20px of growth flex-grow: 1; 20px of growth 43
- 44. 1 2 3 40px 20px 20px 20px 44
- 45. 1 2 3 40px 20px 20px 20px 20px of “shrink” available 45
- 47. flex-shrink: 0; flex-shrink: 1; flex-shrink: 1; 1 0px of shrink 10px of shrink 10px of shrink 47
- 50. PAGE LAYOUT 50 Play with the Codepen codepen.io/lemonmade/pen/RNEpJR?editors=110
- 51. GOAL 51
- 53. SMART POPOVERS 53 Play with the Codepen codepen.io/lemonmade/pen/XJobem?editors=110
- 54. 54
- 55. 55 WRAPPABLE LAYOUTS Play with the Codepen codepen.io/lemonmade/pen/XXWZBr?editors=110
- 56. 56
- 57. REFLOWING HEADER 57 Play with the Codepen codepen.io/lemonmade/pen/ZYgNmy?editors=110
- 58. 58