CSS Layout Techniques - Replacing Floats with Flexbox

Overview:
CSS floats have been the primary way that we define web layout for almost the past decade. They’ve worked pretty well over the years but times are changing. flexbox is becoming the new norm for layout and solves some of the main gripes we deal with when using floats. Some of the new concepts may be a bit difficult to grasp in the beginning but in this talk we’ll focus on practical ways that flexbox is used when creating modern interfaces.

Objective:
Give you a good overview of flexbox, how it works, the layout features available, and how to tackle typical modern interface designs.

Things Audience Members Will Learn:
1. Flexbox primer on alignment, direction, orientation, and order
2. Simple to complex design patterns
3. Accessibility & markup best practices
4. Browser support and what you can start to use now

Examples
https://codepen.io/collection/DbrpKV/

Transcript

1. @BERMONPAINTER
   CSS LAYOUT TECHNIQUES:
   REPLACING FLOATS
   WITH FLEXBOX
   

   View Slide

2. SOLVING THE HARDEST PROBLEM
   THE WEB HAS EVER KNOWN…
   

   View Slide

3. SOLVING THE HARDEST PROBLEM
   THE WEB HAS EVER KNOWN…
   

   View Slide

4. CSS
   HTML
   body {
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .box {
   width: 100px;
   height: 100px;
   }
   

   View Slide

5. THE HOLY GRAIL
   A BRIEF HISTORY
   IN LAYOUT
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. THE MEDIA OBJECT
    A BRIEF HISTORY
    IN LAYOUT
    

    View Slide

17. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

18. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

19. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

20. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

21. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

22. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

23. THE GRID
    A BRIEF HISTORY
    IN LAYOUT
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. FLEXBOX & GRID
    NOT COMPETING STANDARDS
    

    View Slide

28. View Slide

29. View Slide

30. Ullamcorper Adipiscing Venenatis Consectetur Tortor
    Curabitur blandit tempus porttitor. Aenean eu leo quam.
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    Curabitur blandit tempus porttitor. Maecenas sed diam eget
    risus varius blandit sit amet non magna.
    

    View Slide

31. gridbyexample.com/video/
    RACHEL ANDREW
    @RACHELANDREW
    labs.jensimmons.com
    JEN SIMMONS
    @JENNSIMMONS
    

    View Slide

32. PARENT/CONTAINER PROPERTIES
    FLEXBOX PRIMER
    

    View Slide

33. CSs
    .container {
    display: flex;
    }
    .box {
    ...
    }
    1
    

    View Slide

34. CSs
    .container {
    display: flex;
    flex-direction: row;
    }
    .box {
    ...
    }
    1 2 3 4
    

    View Slide

35. CSs
    .container {
    display: flex;
    flex-direction: row-reverse;
    }
    .box {
    ...
    }
    1
    2
    3
    4
    

    View Slide

36. CSs
    .container {
    display: flex;
    flex-direction: column;
    }
    .box {
    ...
    }
    1
    2
    3
    4
    

    View Slide

37. CSs
    .container {
    display: flex;
    flex-direction: column-reverse;
    }
    .box {
    ...
    }
    4
    3
    2
    1
    

    View Slide

38. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

39. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    }
    .box {
    ...
    }
    1 2 3 4 5 6 7
    

    View Slide

40. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7
    

    View Slide

41. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7
    

    View Slide

42. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

43. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

44. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

45. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

46. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

47. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

48. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

49. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

50. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

51. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    }
    .box {
    ...
    }
    1 2 3 4 5
    

    View Slide

52. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17
    

    View Slide

53. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17
    

    View Slide

54. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17
    

    View Slide

55. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17
    

    View Slide

56. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: space-between;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17
    

    View Slide

57. CSs
    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: space-around;
    }
    .box {
    ...
    }
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17
    

    View Slide

58. ELEMENT PROPERTIES
    FLEXBOX PRIMER
    

    View Slide

59. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box:nth-child(0) {
    order: 0;
    }
    .box:nth-child(1) {
    order: -1;
    }
    .box:nth-child(2) {
    order: 1;
    }
    .box:nth-child(3) {
    order: 0;
    }
    .box:nth-child(4) {
    order: 0;
    }
    2 1 4 5 3
    

    View Slide

60. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box {
    flex-grow: 1;
    }
    1 2 3 4 5
    

    View Slide

61. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box {
    flex-shrink: 0;
    }
    1 2 3 4 5
    

    View Slide

62. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box {
    flex-grow: 1;
    }
    .box:nth-child(2) {
    flex-grow: 2;
    }
    1 3
    2 4 5
    

    View Slide

63. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box {
    flex-grow: 1;
    }
    .box:nth-child(2) {
    flex-basis: 200px;
    }
    1 3
    2 4 5
    

    View Slide

64. CSs
    .container {
    display: flex;
    flex-flow: row nowrap;
    }
    .box {
    flex: 1 0;
    }
    .box:nth-child(2) {
    flex: 1 2;
    }
    1 3
    2 4 5
    

    View Slide

65. PRACTICE
    FLEXBOX PRIMER
    

    View Slide

66. View Slide

67. View Slide

68. http://codepen.io/collection/DbrpKV
    

    View Slide

69. MAKING MORE COMPLEX LAYOUTS
    FLEXBOX PRIMER
    

    View Slide

70. HTML
    
    
    
    Title
    Content...
    
    
    
    Title
    Content...
    
    
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    

    View Slide

71. CSs
    .panes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    height:100vh;
    text-align: center;
    width: 100%;
    }
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    

    View Slide

72. CSs
    .panes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    height:100vh;
    text-align: center;
    width: 100%;
    }
    .pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    }
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    Venenatis Fringilla
    Justo Sem Amet
    Aenean eu leo quam. Pellentesque
    ornare sem lacinia quam venenatis
    vestibulum. Nullam quis risus
    eget urna mollis ornare vel eu
    leo. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras
    justo odio, dapibus ac facilisis
    in, egestas eget quam.
    

    View Slide

73. HTML
    
    
    
    
    
    
    
    

    View Slide

74. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    

    View Slide

75. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    

    View Slide

76. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    

    View Slide

77. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    

    View Slide

78. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    

    View Slide

79. HTML
    html, body {
    height: 100%;
    }
    body {
    display: flex;
    flex-direction: column;
    }
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -2;
    }
    .sidebar {
    flex-basis: 20%;
    order: -1;
    }
    

    View Slide

80. HTML
    
    
    
    Title
    Description
    
    
    
    Title
    Description
    
    
    
    Title
    Description
    
    ...
    
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

81. CSs
    .cards {
    display: flex;
    flex-flow: row wrap;
    }
    .card {
    flex: 1 0 25%;
    }
    .card:nth-last-child(2):nth-child(4n) {
    min-width: 33%;
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

82. CSs
    .cards {
    display: flex;
    flex-flow: row wrap;
    }
    .card {
    flex: 1 0 25%;
    }
    .card:nth-last-child(2):nth-child(4n) {
    min-width: 33%;
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

83. CSs
    .cards {
    display: flex;
    flex-flow: row wrap;
    }
    .card {
    flex: 1 0 25%;
    }
    .card:nth-last-child(2):nth-child(4n) {
    min-width: 33%;
    }
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    

    View Slide

84. ACCESSIBILITY
    

    View Slide

85. CSS
    HTML
    
    
    
    
    
    
    
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    1
    2 3
    DOM ORDER
    

    View Slide

86. CSS
    HTML
    
    
    
    
    
    
    
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    2
    1 3
    VISUAL ORDER
    

    View Slide

87. CSS
    HTML
    
    
    
    
    
    
    
    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    1
    2 3
    TAB ORDER
    

    View Slide

88. BROWSER SUPPORT
    

    View Slide

89. FULL SUPPORT
    SAFARI : 6.1+ FIREFOX : 28+
    OPERA : 12.1+ IE EDGE : 12+
    CHROME : 21+
    

    View Slide

90. PARTIAL SUPPORT
    IE: 10-11
    

    View Slide

91. FIN
    OPEN OFFICE HOURS
    Friday mornings: 7am-9am
    officehours.io/people/bermonpainter
    TWITTER/SKYPE/EMAIL
    @bermonpainter
    KEEP IN TOUCH
    

    View Slide