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.

6389097e6acf134606d06217a3c41e47?s=128

Mike Aparicio

June 10, 2014
Tweet

More Decks by Mike Aparicio

Other Decks in Technology

Transcript

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

    Flexbox
  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

    baseline
  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

    items
  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!