Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

2,917 views

Published on

My talk about Flexbox for Generate Conference 2013

Published in: Design, Technology, Business
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,917
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
38
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

  1. 1. FlexboxONE GIANT LEAP FOR WEB LAYOUT STEPHEN HAY GENERATECONF 2013
  2. 2. image: NASA
  3. 3. ~8years image: NASA
  4. 4. https://en.wikipedia.org/wiki/File:First_Web_Server.jpg ~1year
  5. 5. CASCADING STYLE SHEETS, LEVEL 1 ~2years
  6. 6. 17years CSShasbeenaroundfor
  7. 7. aka“Flexbox” and only now do we have “real” layout in the form of Flexible Box Layout Module
  8. 8. “Layout is hard.”
  9. 9. image: NASA
  10. 10. “Layout solutions are an interesting area in CSS to me.” –TabAtkins
  11. 11. Twomajortypesof“real”weblayout
  12. 12. Before you get all excited…
  13. 13. http://www.xanthir.com/blog/b4580 Flexboxes aren’t ideal for page layout
  14. 14. AquickintroductiontoFlexbox Terminology Axes & Size Flex Alignment Order
  15. 15. Leaveyourlayoutbaggage atthedoor.
  16. 16. Terminology Flex containers Flex items Main axis / size / dimension Cross axis / size / dimension Start / end
  17. 17. Hi,Bob. #bob { display: flex; } (Bob is a flex container)
  18. 18. Flexitems Items in a flex container are, by default, flex items (even anonymous block boxes) I’m a flex item! Me too! Me three!
  19. 19. Mainaxis + main size, main dimension
  20. 20. Crossaxis + cross size, cross dimension
  21. 21. Start&End depends on direction CROSS START CROSS END MAIN ENDCENTERMAIN START
  22. 22. Start&End depends on direction MAIN START MAIN END CROSS ENDCENTERCROSS START
  23. 23. Direction #bob { flex-flow: row wrap; } #bob { flex-direction: row | row-reverse | column | column-reverse; flex-wrap: no-wrap | wrap | wrap-reverse; } SHORTHAND:
  24. 24. Flex .foo { flex: 0 1 100px; } .flex-item { flex: flex-grow flex-shrink flex-basis; } EXAMPLE:
  25. 25. Flex .foo { flex: initial; } .foo { flex: 0 1 auto;} IS EQUIVALENT TO: common values (1) width: 150px width: 150px width: 150px
  26. 26. Flex .foo { flex: auto; } .foo { flex: 1 1 auto;} IS EQUIVALENT TO: common values (2) width: 150px width: 150px width: 150px
  27. 27. Flex .foo { flex: none; } .foo { flex: 0 0 auto;} IS EQUIVALENT TO: common values (3) width: 150px width: 150px width: 150px
  28. 28. Flex .foo { flex: [n]; } .foo { flex: [n] 1 0%;} IS EQUIVALENT TO: common values (4) flex: 1 flex: 1 flex: 1
  29. 29. Flex flex: [n] flex: 1 flex: 1 flex: 2
  30. 30. Flex flex: [n] flex: 1 flex: 5 flex: 2
  31. 31. Alignment auto-margins margin-top: auto no margin no margin .foo { margin-top: auto; }
  32. 32. 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
  33. 33. http://dev.w3.org/csswg/css-flexbox/
  34. 34. Alignment along the cross axis: align-items (align-self can be applied to the flex items themselves) ALIGN-ITEMS #bob { align-items: flex-start | flex-end | center | baseline | stretch } in the case of flex-direction: row
  35. 35. Order changes the visual order vs. the source order 3 1 2 .item:nth-child(3) { order: -1; } .foo { order: [n]; }
  36. 36. Commonusecases True centering (both axes) Unknown menu items Display order Wrapping (menu items, boxes) Tab groups Form layout
  37. 37. Asmallexample
  38. 38. Structuredcontent
  39. 39. Basicstyles
  40. 40. display:flexoncontainer
  41. 41. flex-direction:column
  42. 42. margin-auto oniconsand form
  43. 43. flex:1 oninputfield
  44. 44. order foravatardisplay
  45. 45. done.
  46. 46. Browsercompatibility source: http://caniuse.com/#search=flexbox
  47. 47. havefun keeplearning THANK YOU! @stephenhay

×