Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

5,007 views
4,640 views

Published on

My talk on Flexbox for Breaking Development 2013 in Nashville

Published in: Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,007
On SlideShare
0
From Embeds
0
Number of Embeds
143
Actions
Shares
0
Downloads
57
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

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

×