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

Fun with Flexbox

Fun with Flexbox

Lightning Talk presented at Geekfest. June 10, 2014.


Mike Aparicio

June 10, 2014

More Decks by Mike Aparicio

Other Decks in Technology


  1. Mike Aparicio User Interface Engineer, Groupon
 maparicio@groupon.com @peruvianidol Fun with

  2. Table Layout

  3. CSS Layout

  4. float: left; float: right; clear: both; display: block; margin: 0

    auto; position: relative; .clearfix WTF overflow: auto;
  5. Flexbox The Flexbox Layout (Flexible Box) module (currently a W3C

    Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). http://css-tricks.com/snippets/css/a-guide-to-flexbox/
  6. display: block

  7. Flex Container

  8. Gives direct child elements flex context display: flex

  9. None
  10. None
  11. Determines direction of flex axis and order of items along

    the main axis flex-direction
  12. Reverses main axis and cross axis flex-direction

  13. Reverses order and alignment while maintaining source order flex-direction

  14. Determines whether flex items should fit onto a single row

    or wrap onto multiple rows flex-wrap
  15. flex-wrap

  16. Reverses direction of wrapping along the cross axis flex-wrap

  17. Combines flex-direction and flex-wrap properties flex-flow

  18. Determines alignment of flex items across the main axis justify-content

  19. justify-content

  20. align-items Determines alignment of flex items across the cross axis

    when flex container is taller than content
  21. align-items

  22. align-items Aligns flex items with different font sizes along their

  23. align-content Determines alignment of multiple rows when their height exceeds

    the height of the flex items
  24. align-content

  25. align-content

  26. align-content

  27. align-content

  28. align-content

  29. Flex Items

  30. flex-grow Enables flex items to grow to fill available space

  31. flex-grow

  32. flex-grow

  33. flex-grow

  34. flex-shrink Enables flex items to shrink when they exceed the

    size of the flex container
  35. flex-shrink

  36. flex-basis Sets a default width for flex items before extra

    space is distributed
  37. flex-basis

  38. flex-basis

  39. flex-basis

  40. flex Combines flex-grow, flex-shrink and flex-basis properties

  41. order Sets display order of flex items

  42. order

  43. align-self Overrides align-items property of flex container for individual flex

  44. align-self

  45. Use Cases

  46. Navigation

  47. Navigation

  48. Responsive Grid

  49. Responsive Grid

  50. Responsive Grid

  51. Flex-Figure

  52. Flex-Figure

  53. Flex Forms

  54. Vertical Centering

  55. Sticky Footer

  56. Responsive “Holy Grail” Layout

  57. Responsive “Holy Grail” Layout

  58. Browser Support

  59. None
  60. Resources

  61. A Complete Guide to Flexbox
 http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ! Solved by Flexbox

    http://philipwalton.github.io/solved-by-flexbox/ ! Flexbox in 5 Minutes
 http://devbryce.com/site/flexbox/ ! Flexplorer
 http://bennettfeely.com/flexplorer/ ! Flexy Boxes
 http://the-echoplex.net/flexyboxes/ Resources
  62. Thank You!