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

CSS Layout Techniques - Replacing Floats with Flexbox

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/

Bermon Painter

October 03, 2016
Tweet

More Decks by Bermon Painter

Other Decks in Programming

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