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.

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?