Fun with Flexbox

Lightning Talk presented at Geekfest. June 10, 2014.

Transcript

1. Mike Aparicio User Interface Engineer, Groupon
 maparicio@groupon.com @peruvianidol Fun with Flexbox
2. Table Layout
3. CSS Layout
4. float: left; float: right; clear: both; display: block; margin: 0 auto; position: relative; .clearfix WTF overflow: auto;
5. Flexbox The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). http://css-tricks.com/snippets/css/a-guide-to-flexbox/
6. display: block
7. Flex Container
8. Gives direct child elements flex context display: flex
11. Determines direction of flex axis and order of items along the main axis flex-direction
12. Reverses main axis and cross axis flex-direction
13. Reverses order and alignment while maintaining source order flex-direction
14. Determines whether flex items should fit onto a single row or wrap onto multiple rows flex-wrap
15. flex-wrap
16. Reverses direction of wrapping along the cross axis flex-wrap
17. Combines flex-direction and flex-wrap properties flex-flow
18. Determines alignment of flex items across the main axis justify-content
19. justify-content
20. align-items Determines alignment of flex items across the cross axis when flex container is taller than content
21. align-items
22. align-items Aligns flex items with different font sizes along their baseline
23. align-content Determines alignment of multiple rows when their height exceeds the height of the flex items
24. align-content
25. align-content
26. align-content
27. align-content
28. align-content
29. Flex Items
30. flex-grow Enables flex items to grow to fill available space
31. flex-grow
32. flex-grow
33. flex-grow
34. flex-shrink Enables flex items to shrink when they exceed the size of the flex container
35. flex-shrink
36. flex-basis Sets a default width for flex items before extra space is distributed
37. flex-basis
38. flex-basis
39. flex-basis
40. flex Combines flex-grow, flex-shrink and flex-basis properties
41. order Sets display order of flex items
42. order
43. align-self Overrides align-items property of flex container for individual flex items
44. align-self
45. Use Cases
46. Navigation
47. Navigation
48. Responsive Grid
49. Responsive Grid
50. Responsive Grid
51. Flex-Figure
52. Flex-Figure
53. Flex Forms
54. Vertical Centering
55. Sticky Footer
56. Responsive “Holy Grail” Layout
57. Responsive “Holy Grail” Layout
58. Browser Support
60. Resources
61. A Complete Guide to Flexbox
 http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ! Solved by Flexbox
 http://philipwalton.github.io/solved-by-flexbox/ ! Flexbox in 5 Minutes
 http://devbryce.com/site/flexbox/ ! Flexplorer
 http://bennettfeely.com/flexplorer/ ! Flexy Boxes
 http://the-echoplex.net/flexyboxes/ Resources
62. Thank You!