About Flexbox: you can't float anymore - CSSDay 2016 Faenza

Transcript

1. ABOUT FLEXBOX You can't float anymore CSS day FAENZA- 25 marzo 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. The code: < d i v c l a s s = " H o l y G r a i l " > < h e a d e r c l a s s = " H o l y G r a i l - h e a d e r " > H E A D E R < / h e a d e r > < d i v c l a s s = " H o l y G r a i l - b o d y " > < m a i n c l a s s = " H o l y G r a i l - c o n t e n t " > C O N T E N T < p > < s m a l l > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . S e q u i i n v e n t o r < / p > < / m a i n > < n a v c l a s s = " H o l y G r a i l - n a v " > N A V < / n a v > < a s i d e c l a s s = " H o l y G r a i l - a d s " > A D S < / a s i d e > < / d i v > < f o o t e r c l a s s = " H o l y G r a i l - f o o t e r " > F O O T E R < / f o o t e r > < / d i v >
7. Once upon a time... ...we had: Tables Inline blocks Float
8. Tables Seriously? Semantic? NOPE Responsive? NOPE Vertical align? YUP * Order? NOPE *
9. How about d i s p l a y : t a b l e ;? Semantic? YUP Responsive? YUP* Vertical align? YUP Order? NOPE *
10. Come on! What's the problem guy? Styling the element is a pain. Try to add a padding to a row or a max-width to a cell or a margin... The order is still a view issue * * You can use translate for horizontal order...
11. * . 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 ; }
12. See on CodePen
13. . H o l y G r a i l { d i s p l a y : t a b l e ; h e i g h t : 1 0 0 v h ; } . H o l y G r a i l - h e a d e r { d i s p l a y : t a b l e - r o w ; h e i g h t : 1 p x ; } . H o l y G r a i l - f o o t e r { d i s p l a y : t a b l e - r o w ; h e i g h t : 1 p x ; } . H o l y G r a i l - b o d y { d i s p l a y : t a b l e ; h e i g h t : 1 0 0 % ; }
14. . H o l y G r a i l - c o n t e n t , . H o l y G r a i l - n a v , . H o l y G r a i l - a d s { d i s p l a y : t a b l e - c e l l ; w i d t h : 2 0 % ; } . H o l y G r a i l - c o n t e n t { w i d t h : 6 0 % ; t r a n s f o r m : t r a n s l a t e X ( 3 3 . 3 3 3 % ) ; } . H o l y G r a i l - n a v { t r a n s f o r m : t r a n s l a t e X ( - 3 0 0 % ) ; }
15. Inline Block Semantic? YUP Responsive? YUP * Vertical align? ALMOST Order? NOPE *
16. What's the matter? Vertical stretch an element is impossible The order is still a view issue * * You can use margins for horizontal order... but... BUT...
17. White Space
18. See on CodePen
19. . H o l y G r a i l - b o d y { f o n t - s i z e : 0 ; t e x t - a l i g n : l e f t ; } . H o l y G r a i l - n a v , . H o l y G r a i l - c o n t e n t , . H o l y G r a i l - a d s { d i s p l a y : i n l i n e - b l o c k ; v e r t i c a l - a l i g n : t o p ; f o n t - s i z e : 1 r e m ; t e x t - a l i g n : c e n t e r ; w i d t h : 2 0 % ; } . H o l y G r a i l - n a v { m a r g i n - l e f t : - 8 0 % ; } . H o l y G r a i l - c o n t e n t { w i d t h : 6 0 % ; m a r g i n - l e f t : 2 0 % ; } . H o l y G r a i l - a d s { m a r g i n - l e f t : 6 0 % ; }
20. Float Semantic? YUP Responsive? YUP Vertical align? AHAHAHAHAH NOPE Order? NOPE *
21. Why not? The order is still a view issue * * You can use margins... Impossible to manage vertical alignment Clear x Block Formatting Context
22. See on CodePen
23. . H o l y G r a i l - b o d y : a f t e r { d i s p l a y : t a b l e ; c l e a r : b o t h ; c o n t e n t : " " ; } . H o l y G r a i l - n a v , . H o l y G r a i l - c o n t e n t , . H o l y G r a i l - a d s { w i d t h : 2 0 % ; f l o a t : l e f t ; } . H o l y G r a i l - n a v { m a r g i n - l e f t : - 8 0 % ; } . H o l y G r a i l - c o n t e n t { w i d t h : 6 0 % ; m a r g i n - l e f t : 2 0 % ; }
24. 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...
25. They are all hacks
26. Why Flexbox? Semantic? YUP Responsive? YUP Vertical align? YUP Order? F*CK YEAH
27. View on CodePen
28. . H o l y G r a i l { d i s p l a y : f l e x ; f l e x - d i r e c t i o n : c o l u m n ; m i n - h e i g h t : 1 0 0 v h ; } . H o l y G r a i l - b o d y { d i s p l a y : f l e x ; f l e x - g r o w : 1 ; } . H o l y G r a i l - n a v { o r d e r : - 1 ; } . H o l y G r a i l - c o n t e n t , . H o l y G r a i l - n a v , . H o l y G r a i l - a d s { f l e x : 1 0 2 0 % ; } . H o l y G r a i l - c o n t e n t { f l e x - b a s i s : 6 0 % ; }
29. It's all there? Nope
30. But rst some important knowledge
31. Di erences between container and item d i s p l a y : f l e x ; Flex item Flex item Flex item
32. Direction ------ direction row ------> Flex item Flex item Flex item C o l u m n Flex item Flex item Flex item
33. 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 % ;
34. Available space, this is the magic f l e x i t e m f l e x i t e m F R E E S P A C E ° _ ° y f l e x g r o w f l e x i t e m f l e x s h r i n k f l e x i t e m f l e x i t e m
35. Let's see the rules! CODEPEN
36. < d i v c l a s s = " C o n t " > < d i v c l a s s = " E l e E l e - - a " > A < / d i v > < d i v c l a s s = " E l e E l e - - b " > B < / d i v > < d i v c l a s s = " E l e E l e - - c " > C < / d i v > < / d i v > A B C
37. A B C . C o n t { d i s p l a y : f l e x ; }
38. A B C . C o n t { d i s p l a y : f l e x ; j u s t i f y - c o n t e n t : s p a c e - a r o u n d ; }
39. A B C . C o n t { d i s p l a y : f l e x ; j u s t i f y - c o n t e n t : s p a c e - b e t w e e n ; }
40. A B C . C o n t { d i s p l a y : f l e x ; j u s t i f y - c o n t e n t : f l e x - e n d ; }
41. A B C . C o n t { d i s p l a y : f l e x ; } . E l e - - a { f l e x - g r o w : 1 ; }
42. A B C . C o n t { d i s p l a y : f l e x ; f l e x - d i r e c t i o n : c o l u m n - r e v e r s e }
43. C A B . C o n t { d i s p l a y : f l e x ; f l e x - d i r e c t i o n : c o l u m n } . E l e - - c { o r d e r : - 1 ; }
44. A B C . C o n t { d i s p l a y : f l e x ; } . E l e { w i d t h : 5 0 % ; }
45. A B C . C o n t { d i s p l a y : f l e x ; f l e x - w r a p : w r a p ; } . E l e { w i d t h : 5 0 % ; }
46. A B C . C o n t { d i s p l a y : f l e x ; f l e x - w r a p : w r a p - r e v e r s e ; } . E l e { w i d t h : 5 0 % ; }
47. A B C . C o n t { d i s p l a y : f l e x ; h e i g h t : 1 0 0 p x ; }
48. A B C . C o n t { d i s p l a y : f l e x ; h e i g h t : 1 0 0 p x ; a l i g n - i t e m s : f l e x - e n d ; }
49. A B C . C o n t { d i s p l a y : f l e x ; h e i g h t : 1 0 0 p x ; } . E l e - - b { a l i g n - s e l f : c e n t e r ; }
50. Real stuff
51. See on CodePen
52. . F o r m C o n t a i n e r { d i s p l a y : f l e x ; f l e x - w r a p : w r a p ; } . I n p u t { f l e x : 1 0 3 0 0 p x ; }
53. With mediaqueries
55. See on CodePen
56. . C o n t a i n e r { d i s p l a y : f l e x ; f l e x - w r a p : w r a p ; } . T i t l e , . S u b T i t l e { w i d t h : 1 0 0 % ; } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 5 0 r e m ) { . T i t l e , . S u b T i t l e { o r d e r : - 1 ; } }
57. RECAP Flexible Responsive Ready for today
58. What's now?
59. Can I use?
60. How about old crappy explorer?
61. You can go for a fallback! . F o r m C o n t a i n e r { d i s p l a y : f l e x ; f l e x - w r a p : w r a p ; } / / C l e a r f i x f o r o l d b r o w s e r . F o r m C o n t a i n e r : a f t e r { d i s p l a y : t a b l e ; c l e a r : b o t h ; c o n t e n t : " " ; } . I n p u t { f l e x : 1 0 3 0 0 p x ; f l o a t : l e f t ; / / o l d b r o w s e r s u p p o r t w i d t h : c a l c ( 2 5 % - 1 0 p x ) ; / / o l d b r o w s e r s u p p o r t }
62. Or if you want to: A poly ll appears!
63. Is flexbox a silver bullet?
64. No Sorry, I've lied to you A little
65. Flexbox is designed basically for: content driven layout component not for grid Take a look at css grid
66. But Grid CSS is not supported for now
67. Any idea? There are a few: And my favourite one... Flexboxgrid Bootstrap - alpha 4
68. Super GiGi
69. 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.
70. Links for you: CSS Tricks guide to exbox Learn exbox playing with exbox froggy All the known exbox bugs Autopre xer Modernizr
71. Questions?
72. http://goo.gl/1jsI7u