ABOUT FLEXBOX You can't float anymore

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?