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 full-size slide

  2. The design-in-the-browser hamburger

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Designers aren’t stupid.

    View full-size 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 full-size slide

  11. ~8 years
    image: NASA

    View full-size slide

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

    View full-size slide

  13. CASCADING STYLE SHEETS, LEVEL 1
    ~2 years

    View full-size slide

  14. 17 years
    CSS has been around for

    View full-size slide

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

    View full-size slide

  16. “Layout is hard.”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Two major types of “real” web layout

    View full-size slide

  20. Two major types of “real” web layout

    View full-size slide

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

    View full-size slide

  22. alignment
    Flexbox helps us with
    both horizontally and vertically

    View full-size slide

  23. ordre
    Flexbox helps us with
    display

    View full-size slide

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

    View full-size slide

  25. Leave your layout baggage
    at the door.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. display: flex | inline-flex

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  48. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 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 full-size slide

  52. A small example

    View full-size slide

  53. Structured content

    View full-size slide

  54. Basic styles

    View full-size slide

  55. display:flex on container

    View full-size slide

  56. flex-direction:column

    View full-size slide

  57. margin-auto
    on icons and
    form

    View full-size slide

  58. flex:1
    on input field

    View full-size slide

  59. order
    for avatar display

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. Before you get all excited…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. have fun
    keep learning
    THANK YOU!
    @stephenhay

    View full-size slide