Flexbox provides a new way to lay out items in rows or columns and allows developers to easily align and distribute space among items within the parent flex container. It solves common layout problems like equal height columns more semantically and responsively than previous techniques like floats or tables. While flexbox is not a silver bullet and is designed primarily for content-driven layouts rather than grids, it handles responsive design, vertical alignment, and ordering of items better than previous methods. Polyfills exist to support older browsers, and tools like Flexbox Grid and Bootstrap's alpha grid system provide frameworks to help build layouts with flexbox.

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
The Holy Grail refers to a web page layout which has multiple, equal height
columns that are defined with style sheets. It is commonly desired and
implemented, although the ways in which it can be implemented with current
technologies all have drawbacks. Because of this, finding an optimal
implementation has been likened to searching for the elusive Holy Grail.
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
display:table;?
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
display: flex;
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
flex-basis: 50%; flex-basis: 50%;
flex-basis: 50%;
flex-basis: 50%;

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?