Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding flex box CSS Day 2016

1,565 views

Published on

CSS Day slides

Published in: Technology

Understanding flex box CSS Day 2016

  1. 1. ABOUT FLEXBOX You can't float anymore CSS day FAENZA- 25 marzo 2016
  2. 2. About me I'm Davide Di Pumpo, I'm an UI developer in . I love graphic novel, competitive videogames and cats. Objectway You can nd me on the internet with the nickname MakhBeth - -Twitter GitHub LinkedIn
  3. 3. Let's start MEOW
  4. 4. The problem? How can I make this f*****g layout?
  5. 5. The holy grail layout The Holy Grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail. Source - Wikipedia
  6. 6. The code: <div class="HolyGrail"> <header class="HolyGrail-header">HEADER</header> <div class="HolyGrail-body"> <main class="HolyGrail-content"> CONTENT <p> <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventor </p> </main> <nav class="HolyGrail-nav">NAV</nav> <aside class="HolyGrail-ads">ADS</aside> </div> <footer class="HolyGrail-footer">FOOTER</footer> </div>
  7. 7. Once upon a time... ...we had: Tables Inline blocks Float
  8. 8. Tables Seriously? Semantic? NOPE Responsive? NOPE Vertical align? YUP * Order? NOPE *
  9. 9. How about display:table;? Semantic? YUP Responsive? YUP* Vertical align? YUP Order? NOPE *
  10. 10. Come on! What's the problem guy? Styling the element is a pain. Try to add a padding to a row or a max-width to a cell or a margin... The order is still a view issue * * You can use translate for horizontal order...
  11. 11. * .first { display: table-caption; } .second { display: table-footer-group; }
  12. 12. See on CodePen
  13. 13. .HolyGrail { display: table; height: 100vh; } .HolyGrail-header { display: table-row; height: 1px; } .HolyGrail-footer { display: table-row; height: 1px; } .HolyGrail-body { display: table; height: 100%; }
  14. 14. .HolyGrail-content, .HolyGrail-nav, .HolyGrail-ads { display: table-cell; width: 20%; } .HolyGrail-content { width: 60%; transform: translateX(33.333%); } .HolyGrail-nav { transform: translateX(-300%); }
  15. 15. Inline Block Semantic? YUP Responsive? YUP * Vertical align? ALMOST Order? NOPE *
  16. 16. What's the matter? Vertical stretch an element is impossible The order is still a view issue * * You can use margins for horizontal order... but... BUT...
  17. 17. White Space
  18. 18. See on CodePen
  19. 19. .HolyGrail-body { font-size: 0; text-align: left; } .HolyGrail-nav, .HolyGrail-content, .HolyGrail-ads { display: inline-block; vertical-align: top; font-size: 1rem; text-align: center; width: 20%; } .HolyGrail-nav { margin-left: -80%; } .HolyGrail-content { width: 60%; margin-left: 20%; } .HolyGrail-ads { margin-left: 60%; }
  20. 20. Float Semantic? YUP Responsive? YUP Vertical align? AHAHAHAHAH NOPE Order? NOPE *
  21. 21. Why not? The order is still a view issue * * You can use margins... Impossible to manage vertical alignment Clear x Block Formatting Context
  22. 22. See on CodePen
  23. 23. .HolyGrail-body:after { display: table; clear: both; content: " "; } .HolyGrail-nav, .HolyGrail-content, .HolyGrail-ads { width: 20%; float: left; } .HolyGrail-nav { margin-left: -80%; } .HolyGrail-content { width: 60%; margin-left: 20%; }
  24. 24. RECAP about the old good times Tables have issues Inline blocks have issues Floats have issues It's impossible (without hacks) to manage order more important...
  25. 25. They are all hacks
  26. 26. Why Flexbox? Semantic? YUP Responsive? YUP Vertical align? YUP Order? F*CK YEAH
  27. 27. View on CodePen
  28. 28. .HolyGrail { display: flex; flex-direction: column; min-height: 100vh; } .HolyGrail-body { display: flex; flex-grow: 1; } .HolyGrail-nav { order: -1; } .HolyGrail-content, .HolyGrail-nav, .HolyGrail-ads { flex: 1 0 20%; } .HolyGrail-content { flex-basis: 60%; }
  29. 29. It's all there? Nope
  30. 30. But rst some important knowledge
  31. 31. Di erences between container and item display: flex; Flex item Flex item Flex item
  32. 32. Direction ------ direction row ------> Flex item Flex item Flex item C o l u m n Flex item Flex item Flex item
  33. 33. Flex Basis, all is relative flex-basis: 50%; flex-basis: 50%; flex-basis: 50%; flex-basis: 50%;
  34. 34. Available space, this is the magic flex item flex item FREE SPACE °_°y flex grow flex item flex shrink flex item flex item
  35. 35. Let's see the rules! CODEPEN
  36. 36. <div class="Cont"> <div class="Ele Ele--a">A</div> <div class="Ele Ele--b">B</div> <div class="Ele Ele--c">C</div> </div> A B C
  37. 37. A B C .Cont { display: flex; }
  38. 38. A B C .Cont { display: flex; justify-content: space-around; }
  39. 39. A B C .Cont { display: flex; justify-content: space-between; }
  40. 40. A B C .Cont { display: flex; justify-content: flex-end; }
  41. 41. A B C .Cont { display: flex; } .Ele--a { flex-grow: 1; }
  42. 42. A B C .Cont { display: flex; flex-direction: column-reverse }
  43. 43. C A B .Cont { display: flex; flex-direction: column } .Ele--c { order: -1; }
  44. 44. A B C .Cont { display: flex; } .Ele { width: 50%; }
  45. 45. A B C .Cont { display: flex; flex-wrap: wrap; } .Ele { width: 50%; }
  46. 46. A B C .Cont { display: flex; flex-wrap: wrap-reverse; } .Ele { width: 50%; }
  47. 47. A B C .Cont { display: flex; height: 100px; }
  48. 48. A B C .Cont { display: flex; height: 100px; align-items: flex-end; }
  49. 49. A B C .Cont { display: flex; height: 100px; } .Ele--b { align-self: center; }
  50. 50. Real stuff
  51. 51. See on CodePen
  52. 52. .FormContainer { display: flex; flex-wrap: wrap; } .Input { flex: 1 0 300px; }
  53. 53. With mediaqueries
  54. 54. See on CodePen
  55. 55. .Container { display: flex; flex-wrap: wrap; } .Title, .SubTitle { width: 100%; } @media only screen and (min-width: 50rem) { .Title, .SubTitle { order: -1; } }
  56. 56. RECAP Flexible Responsive Ready for today
  57. 57. What's now?
  58. 58. Can I use?
  59. 59. How about old crappy explorer?
  60. 60. You can go for a fallback! .FormContainer { display: flex; flex-wrap: wrap; } // Clearfix for old browser .FormContainer:after { display: table; clear: both; content: " "; } .Input { flex: 1 0 300px; float: left; // old browser support width: calc(25% - 10px); // old browser support }
  61. 61. Or if you want to: A poly ll appears!
  62. 62. Is flexbox a silver bullet?
  63. 63. No Sorry, I've lied to you A little
  64. 64. Flexbox is designed basically for: content driven layout component not for grid Take a look at css grid
  65. 65. But Grid CSS is not supported for now
  66. 66. Any idea? There are a few: And my favourite one... Flexboxgrid Bootstrap - alpha 4
  67. 67. Super GiGi
  68. 68. RECAP Can I use? Yes It's not for everything, but it's the best we have now There are a lot of tool to help us.
  69. 69. Links for you: CSS Tricks guide to exbox Learn exbox playing with exbox froggy All the known exbox bugs Autopre xer Modernizr
  70. 70. Questions?
  71. 71. http://goo.gl/1jsI7u

×