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/

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

October 03, 2016
Tweet

Transcript

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

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

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

  4. CSS HTML body { display: flex; align-items: center; justify-content: center;

    } .box { width: 100px; height: 100px; }
  5. THE HOLY GRAIL A BRIEF HISTORY IN LAYOUT

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. THE MEDIA OBJECT A BRIEF HISTORY IN LAYOUT

  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.
  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.
  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.
  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.
  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.
  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.
  23. THE GRID A BRIEF HISTORY IN LAYOUT

  24. None
  25. None
  26. None
  27. FLEXBOX & GRID NOT COMPETING STANDARDS

  28. None
  29. None
  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.
  31. gridbyexample.com/video/ RACHEL ANDREW @RACHELANDREW labs.jensimmons.com JEN SIMMONS @JENNSIMMONS

  32. PARENT/CONTAINER PROPERTIES FLEXBOX PRIMER

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    center; } .box { ... } 1 2 3 4 5
  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
  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
  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
  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
  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
  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
  58. ELEMENT PROPERTIES FLEXBOX PRIMER

  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
  60. CSs .container { display: flex; flex-flow: row nowrap; } .box

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

    { flex-shrink: 0; } 1 2 3 4 5
  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
  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
  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
  65. PRACTICE FLEXBOX PRIMER

  66. None
  67. None
  68. http://codepen.io/collection/DbrpKV

  69. MAKING MORE COMPLEX LAYOUTS FLEXBOX PRIMER

  70. HTML <main class="panes"> <section class="pane"> <img class="pane-image" src="image.png" /> <h2

    class="pane-title">Title</h2> <p class="pane-content">Content...</p> </section> <section class="pane"> <img class="pane-image" src="image.png" /> <h2 class="pane-title">Title</h2> <p class="pane-content">Content...</p> </section> </main> 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.
  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.
  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.
  73. HTML <header class="masthead"></header> <main class="container"> <article class="content"></article> <nav class="navigation"></nav> <aside

    class="sidebar"></aside> </main> <footer class="footer"></footer>
  74. HTML html, body { height: 100%; } body { display:

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

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

    flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; }
  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; }
  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%; }
  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; }
  80. HTML <div class="cards"> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p

    class="card-description">Description</p> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> ... </div> 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
  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
  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
  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
  84. ACCESSIBILITY

  85. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav>

    <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 1 2 3 DOM ORDER
  86. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav>

    <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 2 1 3 VISUAL ORDER
  87. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav>

    <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 1 2 3 TAB ORDER
  88. BROWSER SUPPORT

  89. FULL SUPPORT SAFARI : 6.1+ FIREFOX : 28+ OPERA :

    12.1+ IE EDGE : 12+ CHROME : 21+
  90. PARTIAL SUPPORT IE: 10-11

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

    KEEP IN TOUCH