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 flexbox


Published on

We will see why flex-box is, today, the best choice about CSS layout. We will discover the alternatives and we will analyze all the Flexbox options.

Published in: Software
  • Be the first to comment

Understanding flexbox

  1. 1. ABOUT FLEXBOX You can't float anymore MILANO FRONT END MEETUP - 15/12/2015
  2. 2. About me I'm Davide Di Pumpo and I'm a front-end developer. I love graphic novel, competitive videogames and cats. You can find 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. Once upon a time... ...we had: Tables Inline block Float
  7. 7. Tables Seriously? Semantic? NOPE Responsive? NOPE Vertical align? YUP Order? NOPE *
  8. 8. How about display:table;? Semantic? YUP * Responsive? YUP * Vertical align? YUP * Order? NOPE *
  9. 9. Come on! What's the problem guy? You must use element to simulate row Styling the element is a pain. Try to add a padding to a row or a max-width to a cell The order is still a view issue Try it yourself
  10. 10. Inline Block Semantic? YUP Responsive? YUP * Vertical align? ALMOST Order? NOPE *
  11. 11. What's the matter? Vertical stretch an element is impossible but... BUT...
  12. 12. White Space
  13. 13. Float Semantic? YUP Responsive? YUP * Vertical align? AHAHAHAHAH NOPE Order? NOPE *
  14. 14. Why not? Clearfix Block Formatting Context Impossible to manage vertical alignment The holy grail
  15. 15. 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...
  16. 16. They are all hacks
  17. 17. Why Flexbox? Semantic? YUP Responsive? YUP Vertical align? YUP Order? F*CK YEAH
  18. 18. The holy grail SEE IT IN ACTION
  19. 19. It's all there? Nope
  20. 20. But first some important knowledge
  21. 21. Differences between container and item display: flex; Flex item Flex item Flex item
  22. 22. Direction ------ direction row ------> Flex item Flex item Flex item C o l u m n Flex item Flex item Flex item
  23. 23. Flex Basis, all is relative flex-basis: 50%; flex-basis: 50%; flex-basis: 50%; flex-basis: 50%;
  24. 24. Let's see all the rules!
  25. 25. Responsive without media query! You can use flex basis to manage a min-dimension EXAMPLE
  26. 26. Mix it with the old school! You can starting use flex via beautiful enhancement! EXAMPLE
  27. 27. But you can use media query for beautiful thing With order property! EXAMPLE
  28. 28. RECAP Flexible Responsive Ready for today
  29. 29. What's now?
  30. 30. Can I use?
  31. 31. How about old crappy explorer? Don't worry: A polyfill appears!
  32. 32. Is flexbox a silver bullet?
  33. 33. No Sorry, I've lied to you A little
  34. 34. Flexbox is designed basically for: content driven layout component not for grid Take a look at css grid
  35. 35. But Grid CSS is not supported for now
  36. 36. Any idea? There are a few: And my favourite one... Flexboxgrid Bootstrap - alpha 4
  37. 37. Super GiGi
  38. 38. RECAP Can I use? Yes It's not for everything, but is the best we have now There are a lot of tool to help us.
  39. 39. Links for you: CSS Tricks guide to flexbox Learn flexbox playing with flexbox froggy All the known flexbox bugs Autoprefixer
  40. 40. Questions?