Upgrade to Pro — share decks privately, control downloads, hide ads and more …

About Flexbox: you can't float anymore

About Flexbox: you can't float anymore

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.

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

December 15, 2015
Tweet

More Decks by Davide Di Pumpo

Other Decks in Programming

Transcript

  1. ABOUT FLEXBOX You can't float anymore MILANO FRONT END MEETUP

    - 15/12/2015
  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. Let's start MEOW

  4. The problem? How can I make this f*****g layout?

  5. The holy grail layout T h e H o l

    y G r a i l r e f e r s t o a w e b p a g e l a y o u t w h i c h h a s m u l t i p l e , e q u a l h e i g h t c o l u m n s t h a t a r e d e f i n e d w i t h s t y l e s h e e t s . I t i s c o m m o n l y d e s i r e d a n d i m p l e m e n t e d , a l t h o u g h t h e w a y s i n w h i c h i t c a n b e i m p l e m e n t e d w i t h c u r r e n t t e c h n o l o g i e s a l l h a v e d r a w b a c k s . B e c a u s e o f t h i s , f i n d i n g a n o p t i m a l i m p l e m e n t a t i o n h a s b e e n l i k e n e d t o s e a r c h i n g f o r t h e e l u s i v e H o l y G r a i l . Source - Wikipedia
  6. Once upon a time... ...we had: Tables Inline block Float

  7. Tables Seriously? Semantic? NOPE Responsive? NOPE Vertical align? YUP Order?

    NOPE *
  8. How about d i s p l a y :

    t a b l e ;? Semantic? YUP * Responsive? YUP * Vertical align? YUP * Order? NOPE *
  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. Inline Block Semantic? YUP Responsive? YUP * Vertical align? ALMOST

    Order? NOPE *
  11. What's the matter? Vertical stretch an element is impossible but...

    BUT...
  12. White Space

  13. Float Semantic? YUP Responsive? YUP * Vertical align? AHAHAHAHAH NOPE

    Order? NOPE *
  14. Why not? Clearfix Block Formatting Context Impossible to manage vertical

    alignment The holy grail
  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. They are all hacks

  17. Why Flexbox? Semantic? YUP Responsive? YUP Vertical align? YUP Order?

    F*CK YEAH
  18. The holy grail SEE IT IN ACTION

  19. It's all there? Nope

  20. But first some important knowledge

  21. Differences between container and item d i s p l

    a y : f l e x ; Flex item Flex item Flex item
  22. Direction ------ direction row ------> Flex item Flex item Flex

    item C o l u m n Flex item Flex item Flex item
  23. Flex Basis, all is relative f l e x -

    b a s i s : 5 0 % ; f l e x - b a s i s : 5 0 % ; f l e x - b a s i s : 5 0 % ; f l e x - b a s i s : 5 0 % ;
  24. Let's see all the rules!

  25. Responsive without media query! You can use flex basis to

    manage a min-dimension EXAMPLE
  26. Mix it with the old school! You can starting use

    flex via beautiful enhancement! EXAMPLE
  27. But you can use media query for beautiful thing With

    order property! EXAMPLE
  28. RECAP Flexible Responsive Ready for today

  29. What's now?

  30. Can I use?

  31. How about old crappy explorer? Don't worry: A polyfill appears!

  32. Is flexbox a silver bullet?

  33. No Sorry, I've lied to you A little

  34. Flexbox is designed basically for: content driven layout component not

    for grid Take a look at css grid
  35. But Grid CSS is not supported for now

  36. Any idea? There are a few: And my favourite one...

    Flexboxgrid Bootstrap - alpha 4
  37. Super GiGi

  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. Links for you: CSS Tricks guide to flexbox Learn flexbox

    playing with flexbox froggy All the known flexbox bugs Autoprefixer
  40. Questions?