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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. THE HOLY GRAIL
    A BRIEF HISTORY
    IN LAYOUT

    View full-size slide

  6. THE MEDIA OBJECT
    A BRIEF HISTORY
    IN LAYOUT

    View full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. THE GRID
    A BRIEF HISTORY
    IN LAYOUT

    View full-size slide

  14. FLEXBOX & GRID
    NOT COMPETING STANDARDS

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. PARENT/CONTAINER PROPERTIES
    FLEXBOX PRIMER

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

  43. ELEMENT PROPERTIES
    FLEXBOX PRIMER

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. PRACTICE
    FLEXBOX PRIMER

    View full-size slide

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

    View full-size slide

  52. MAKING MORE COMPLEX LAYOUTS
    FLEXBOX PRIMER

    View full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

  65. 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 full-size slide

  66. ACCESSIBILITY

    View full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. 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 full-size slide

  70. BROWSER SUPPORT

    View full-size slide

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

    View full-size slide

  72. PARTIAL SUPPORT
    IE: 10-11

    View full-size slide

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

    View full-size slide