Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flexbox: One Giant Leap for Web Layout

Stephen Hay
October 22, 2013

Flexbox: One Giant Leap for Web Layout

My talk on Flexbox for Breaking Development 2013 in Nashville

Stephen Hay

October 22, 2013
Tweet

More Decks by Stephen Hay

Other Decks in Design

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