Fun with Flexbox

Lightning Talk presented at Geekfest. June 10, 2014.

Transcript

1. Mike Aparicio
   User Interface Engineer, Groupon

   maparicio@groupon.com
   @peruvianidol
   Fun with Flexbox
   

   View Slide

2. Table Layout
   

   View Slide

3. CSS Layout
   

   View Slide

4. float: left; float: right;
   clear: both;
   display: block; margin: 0 auto;
   position: relative;
   .clearfix
   WTF
   overflow: auto;
   

   View Slide

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/
   

   View Slide

6. display: block
   

   View Slide

7. Flex Container
   

   View Slide

8. Gives direct child elements flex context
   display: flex
   

   View Slide

9. View Slide

10. View Slide

11. Determines direction of flex axis and order
    of items along the main axis
    flex-direction
    

    View Slide

12. Reverses main axis and cross axis
    flex-direction
    

    View Slide

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

    View Slide

14. Determines whether flex items should
    fit onto a single row or wrap onto
    multiple rows
    flex-wrap
    

    View Slide

15. flex-wrap
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. justify-content
    

    View Slide

20. align-items
    Determines alignment of flex items across
    the cross axis when flex container is taller
    than content
    

    View Slide

21. align-items
    

    View Slide

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

    View Slide

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

    View Slide

24. align-content
    

    View Slide

25. align-content
    

    View Slide

26. align-content
    

    View Slide

27. align-content
    

    View Slide

28. align-content
    

    View Slide

29. Flex Items
    

    View Slide

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

    View Slide

31. flex-grow
    

    View Slide

32. flex-grow
    

    View Slide

33. flex-grow
    

    View Slide

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

    View Slide

35. flex-shrink
    

    View Slide

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

    View Slide

37. flex-basis
    

    View Slide

38. flex-basis
    

    View Slide

39. flex-basis
    

    View Slide

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

    View Slide

41. order
    Sets display order of flex items
    

    View Slide

42. order
    

    View Slide

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

    View Slide

44. align-self
    

    View Slide

45. Use Cases
    

    View Slide

46. Navigation
    

    View Slide

47. Navigation
    

    View Slide

48. Responsive Grid
    

    View Slide

49. Responsive Grid
    

    View Slide

50. Responsive Grid
    

    View Slide

51. Flex-Figure
    

    View Slide

52. Flex-Figure
    

    View Slide

53. Flex Forms
    

    View Slide

54. Vertical Centering
    

    View Slide

55. Sticky Footer
    

    View Slide

56. Responsive “Holy Grail” Layout
    

    View Slide

57. Responsive “Holy Grail” Layout
    

    View Slide

58. Browser Support
    

    View Slide

59. View Slide

60. Resources
    

    View Slide

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
    

    View Slide

62. Thank You!
    

    View Slide