ABOUT FLEXBOX You can't float anymore

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
March 15, 2016

ABOUT FLEXBOX You can't float anymore

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

March 15, 2016
Tweet

Transcript

  1. ABOUT FLEXBOX You can't float anymore FRONTENDERS VERONA - 15/03/2016

  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. 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 blocks 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
  10. . f i r s t { d i s

    p l a y : t a b l e - c a p t i o n ; } . s e c o n d { d i s p l a y : t a b l e - f o o t e r - g r o u p ; } Try it yourself
  11. Inline Block Semantic? YUP Responsive? YUP * Vertical align? ALMOST

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

    is still a view issue but... BUT...
  13. White Space

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

    Order? NOPE *
  15. Why not? Clear x Block Formatting Context Impossible to manage

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

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

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

  20. It's all there? Nope

  21. But rst some important knowledge

  22. Di erences between container and item d i s p

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

    item C o l u m n Flex item Flex item Flex item
  24. 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 % ;
  25. Let's see all the rules!

  26. Responsive without media query! You can use ex basis to

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

    ex via beautiful enhancement! EXAMPLE
  28. But you can use media query for beautiful thing With

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

  30. What's now?

  31. Can I use?

  32. How about old crappy explorer? Don't worry: A poly ll

    appears!
  33. Is flexbox a silver bullet?

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

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

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

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

    Flexboxgrid Bootstrap - alpha 4
  38. Super GiGi

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

    playing with exbox froggy All the known exbox bugs Autopre xer
  41. Questions?