Flexbox: One Giant Leap for Web Layout

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
October 22, 2013

Flexbox: One Giant Leap for Web Layout

My talk on Flexbox for Breaking Development 2013 in Nashville

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

October 22, 2013
Tweet

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/

  30. None
  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
  39. None
  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