Flexbox: One Giant Leap for Web Layout

My talk on Flexbox for Breaking Development 2013 in Nashville

Transcript

1. Flexbox ONE GIANT LEAP FOR WEB LAYOUT STEPHEN HAY BDCONF, NASHVILLE 2013
2. The design-in-the-browser hamburger
3. DESIGNER The design-in-the-browser hamburger
4. DESIGNER The design-in-the-browser hamburger CODE (the stuff that’s really happening)
5. DESIGNER The design-in-the-browser hamburger MAGIC CODE (the stuff that’s really happening)
6. DESIGNER The design-in-the-browser hamburger MAGIC CODE (the stuff that’s really happening)
7. DESIGNER The design-in-the-browser hamburger MAGIC CODE (the stuff that’s really happening)
8. DESIGNER The design-in-the-browser hamburger MAGIC CODE
9. Designers aren’t stupid.
10. Designers aren’t stupid. Many designers are willing to explore web tech as a design tool, but we have to make the right things easier. Flexbox is a step in the right direction.
11. image: NASA
12. ~8 years image: NASA
13. https://en.wikipedia.org/wiki/File:First_Web_Server.jpg ~1 year
14. CASCADING STYLE SHEETS, LEVEL 1 ~2 years
15. 17 years CSS has been around for
16. aka “Flexbox” and we finally have “real” layout in the form of Flexible Box Layout Module
17. “Layout is hard.”
18. image: NASA
19. “Layout solutions are an interesting area in CSS to me.” – Tab Atkins
20. http://dev.w3.org/csswg/css-flexbox/ We’re talking about this version
21. Two major types of “real” web layout
22. Two major types of “real” web layout
23. Available space Flexbox helps us deal with even when we don’t know what that will be
24. alignment Flexbox helps us with both horizontally and vertically
25. ordre Flexbox helps us with display
26. A quick introduction to Flexbox Terminology Axes & Size Flex Alignment Order
27. Leave your layout baggage at the door.
28. Terminology Flex containers Flex items Main axis / size / dimension Cross axis / size / dimension Start / end
29. CODE http://www.flickr.com/photos/evdaimon/337754011/
31. display: flex | inline-flex
32. Hi, Bob. #bob { display: flex; } (Bob is a flex container) display: flex | inline-flex
33. Flex items Items in a flex container are, by default, flex items (even anonymous block boxes) I’m a flex item! Me too! Me three!
34. Direction #bob { flex-flow: row wrap; } #bob { flex-direction: row | row-reverse | column | column-reverse; flex-wrap: no-wrap | wrap | wrap-reverse; } SHORTHAND:
35. Main axis + main size, main dimension in the case of flex-direction: row
36. Cross axis + cross size, cross dimension in the case of flex-direction: row
37. Start & End depends on direction CROSS START CROSS END MAIN END CENTER MAIN START in the case of flex-direction: row
38. Start & End depends on direction MAIN START MAIN END CROSS END CENTER CROSS START in the case of flex-direction: column
40. Flex .foo { flex: 0 1 150px; } .flex-item { flex: flex-grow flex-shrink flex-basis; } EXAMPLE:
41. Flex .foo { flex: 0 1 150px; } .flex-item { flex: flex-grow flex-shrink flex-basis; } EXAMPLE:
42. Flex .foo { flex: initial; } .foo { flex: 0 1 auto;} IS EQUIVALENT TO: common values (1) width: 150px width: 150px width: 150px
43. Flex .foo { flex: auto; } .foo { flex: 1 1 auto;} IS EQUIVALENT TO: common values (2) width: 150px width: 150px width: 150px
44. Flex .foo { flex: none; } .foo { flex: 0 0 auto;} IS EQUIVALENT TO: common values (3) width: 150px width: 150px width: 150px
45. Flex .foo { flex: [n]; } .foo { flex: [n] 1 0%;} IS EQUIVALENT TO: common values (4) flex: 1 flex: 1 flex: 1
46. Flex flex: [n] flex: 1 flex: 1 flex: 2
47. Flex flex: [n] flex: 1 flex: 5 flex: 2
48. Alignment auto-margins margin-top: auto no margin no margin .foo { margin-top: auto; }
49. Alignment along the main axis: justify-content (align-content for multiple lines along cross axis) JUSTIFY-CONTENT #bob { justify-content: flex-start | flex-end | center | space-between | space-around } in the case of flex-direction: row
50. http://dev.w3.org/csswg/css-flexbox/
51. http://dev.w3.org/csswg/css-flexbox/
52. Alignment along the cross axis: align-items (align-self can be applied to the flex items themselves/individually) ALIGN-ITEMS #bob { align-items: flex-start | flex-end | center | baseline | stretch } in the case of flex-direction: row
53. http://dev.w3.org/csswg/css-flexbox/
54. Order changes the visual order vs. the source order 3 1 2 .item:nth-child(3) { order: -1; } .foo { order: [n]; }
55. Common use cases True centering (both axes) Multi-box layouts (products, teasers) Unknown menu items Display order Wrapping (menu items, boxes) Tab groups Form layout
56. A small example
57. Structured content
58. Basic styles
59. display:flex on container
60. flex-direction:column
61. margin-auto on icons and form
62. flex:1 on input field
63. order for avatar display
64. done.
65. Browser compatibility source: http://beta.caniuse.com/#search=flexbox
66. Don’t sweat the prefixes http://leaverou.github.io/prefixfree/
67. meh. source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ (but go ahead if you really want to)
68. http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ Syntax variations
69. Before you get all excited…
70. http://www.xanthir.com/blog/b4580 Flexboxes aren’t ideal for page layout
71. Flexbox is ideal for components http://pattern-lab.info/
72. Flexbox is ideal for components http://pattern-lab.info/
73. The hardest thing to learn about new tools is not how to use them, but when to use them.
74. have fun keep learning THANK YOU! @stephenhay