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

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

Cb5004db588b465e64062b4b914f7db7?s=47 Davide Di Pumpo
March 22, 2016
140

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

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

March 22, 2016
Tweet

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

  54. None
  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