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. 6.
  2. 7.
  3. 8.
  4. 9.
  5. 10.
  6. 11.
  7. 12.
  8. 13.
  9. 14.
  10. 15.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 24.
  18. 25.
  19. 26.
  20. 28.
  21. 29.
  22. 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.
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 66.
  34. 67.
  35. 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.
  36. 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.
  37. 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.
  38. 74.

    HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; }
  39. 75.

    HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; }
  40. 76.

    HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; }
  41. 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; }
  42. 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%; }
  43. 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; }
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 89.

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

    12.1+ IE EDGE : 12+ CHROME : 21+