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
   

   View Slide

2. The design-in-the-browser hamburger
   

   View Slide

3. DESIGNER
   The design-in-the-browser hamburger
   

   View Slide

4. DESIGNER
   The design-in-the-browser hamburger
   CODE
   (the stuff that’s really happening)
   

   View Slide

5. DESIGNER
   The design-in-the-browser hamburger
   MAGIC
   CODE
   (the stuff that’s really happening)
   

   View Slide

6. DESIGNER
   The design-in-the-browser hamburger
   MAGIC
   CODE
   (the stuff that’s really happening)
   

   View Slide

7. DESIGNER
   The design-in-the-browser hamburger
   MAGIC
   CODE
   (the stuff that’s really happening)
   

   View Slide

8. DESIGNER
   The design-in-the-browser hamburger
   MAGIC
   CODE
   

   View Slide

9. Designers aren’t stupid.
   

   View Slide

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.
    

    View Slide

11. image: NASA
    

    View Slide

12. ~8 years
    image: NASA
    

    View Slide

13. https://en.wikipedia.org/wiki/File:First_Web_Server.jpg
    ~1 year
    

    View Slide

14. CASCADING STYLE SHEETS, LEVEL 1
    ~2 years
    

    View Slide

15. 17 years
    CSS has been around for
    

    View Slide

16. aka “Flexbox”
    and we finally have “real” layout
    in the form of Flexible Box Layout Module
    

    View Slide

17. “Layout is hard.”
    

    View Slide

18. image: NASA
    

    View Slide

19. “Layout solutions are an
    interesting area in CSS to me.”
    – Tab Atkins
    

    View Slide

20. http://dev.w3.org/csswg/css-flexbox/
    We’re talking about this version
    

    View Slide

21. Two major types of “real” web layout
    

    View Slide

22. Two major types of “real” web layout
    

    View Slide

23. Available
    space
    Flexbox helps us deal with
    even when we don’t know what that will be
    

    View Slide

24. alignment
    Flexbox helps us with
    both horizontally and vertically
    

    View Slide

25. ordre
    Flexbox helps us with
    display
    

    View Slide

26. A quick introduction to Flexbox
    Terminology
    Axes & Size
    Flex
    Alignment
    Order
    

    View Slide

27. Leave your layout baggage
    at the door.
    

    View Slide

28. Terminology
    Flex containers
    Flex items
    Main axis / size / dimension
    Cross axis / size / dimension
    Start / end
    

    View Slide

29. CODE
    http://www.flickr.com/photos/evdaimon/337754011/
    

    View Slide

30. View Slide

31. display: flex | inline-flex
    

    View Slide

32. Hi, Bob.
    #bob { display: flex; }
    (Bob is a flex container)
    display: flex | inline-flex
    

    View Slide

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!
    

    View Slide

34. Direction
    #bob { flex-flow: row wrap; }
    #bob {
    flex-direction: row | row-reverse |
    column | column-reverse;
    flex-wrap: no-wrap | wrap | wrap-reverse;
    }
    SHORTHAND:
    

    View Slide

35. Main axis
    + main size, main dimension
    in the case of flex-direction: row
    

    View Slide

36. Cross axis
    + cross size, cross dimension
    in the case of flex-direction: row
    

    View Slide

37. Start & End
    depends on direction
    CROSS START
    CROSS END
    MAIN END
    CENTER
    MAIN START
    in the case of flex-direction: row
    

    View Slide

38. Start & End
    depends on direction
    MAIN START
    MAIN END
    CROSS END
    CENTER
    CROSS START
    in the case of flex-direction: column
    

    View Slide

39. View Slide

40. Flex
    .foo { flex: 0 1 150px; }
    .flex-item {
    flex: flex-grow flex-shrink flex-basis;
    }
    EXAMPLE:
    

    View Slide

41. Flex
    .foo { flex: 0 1 150px; }
    .flex-item {
    flex: flex-grow flex-shrink flex-basis;
    }
    EXAMPLE:
    

    View Slide

42. Flex
    .foo { flex: initial; }
    .foo { flex: 0 1 auto;}
    IS EQUIVALENT TO:
    common values (1)
    width:
    150px
    width:
    150px
    width:
    150px
    

    View Slide

43. Flex
    .foo { flex: auto; }
    .foo { flex: 1 1 auto;}
    IS EQUIVALENT TO:
    common values (2)
    width:
    150px
    width:
    150px
    width:
    150px
    

    View Slide

44. Flex
    .foo { flex: none; }
    .foo { flex: 0 0 auto;}
    IS EQUIVALENT TO:
    common values (3)
    width:
    150px
    width:
    150px
    width:
    150px
    

    View Slide

45. Flex
    .foo { flex: [n]; }
    .foo { flex: [n] 1 0%;}
    IS EQUIVALENT TO:
    common values (4)
    flex: 1 flex: 1 flex: 1
    

    View Slide

46. Flex flex: [n]
    flex: 1 flex: 1 flex: 2
    

    View Slide

47. Flex flex: [n]
    flex: 1 flex: 5 flex: 2
    

    View Slide

48. Alignment
    auto-margins
    margin-top: auto
    no margin no margin
    .foo { margin-top: auto; }
    

    View Slide

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
    

    View Slide

50. http://dev.w3.org/csswg/css-flexbox/
    

    View Slide

51. http://dev.w3.org/csswg/css-flexbox/
    

    View Slide

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
    

    View Slide

53. http://dev.w3.org/csswg/css-flexbox/
    

    View Slide

54. Order
    changes the visual order vs. the source order
    3 1 2
    .item:nth-child(3) { order: -1; }
    .foo { order: [n]; }
    

    View Slide

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
    

    View Slide

56. A small example
    

    View Slide

57. Structured content
    

    View Slide

58. Basic styles
    

    View Slide

59. display:flex on container
    

    View Slide

60. flex-direction:column
    

    View Slide

61. margin-auto
    on icons and
    form
    

    View Slide

62. flex:1
    on input field
    

    View Slide

63. order
    for avatar display
    

    View Slide

64. done.
    

    View Slide

65. Browser compatibility
    source: http://beta.caniuse.com/#search=flexbox
    

    View Slide

66. Don’t sweat the prefixes
    http://leaverou.github.io/prefixfree/
    

    View Slide

67. meh.
    source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
    (but go ahead if you really want to)
    

    View Slide

68. http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
    Syntax variations
    

    View Slide

69. Before you get all excited…
    

    View Slide

70. http://www.xanthir.com/blog/b4580
    Flexboxes aren’t ideal for page layout
    

    View Slide

71. Flexbox is ideal for components
    http://pattern-lab.info/
    

    View Slide

72. Flexbox is ideal for components
    http://pattern-lab.info/
    

    View Slide

73. The hardest thing to learn about new tools
    is not how to use them, but when to use them.
    

    View Slide

74. have fun
    keep learning
    THANK YOU!
    @stephenhay
    

    View Slide