Slide 1
Slide 1 text
ABOUT
FLEXBOX
You can't float anymore
FRONTENDERS VERONA - 15/03/2016
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Let's start
MEOW
Slide 4
Slide 4 text
The problem?
How can I make this f*****g layout?
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Once upon a time...
...we had:
Tables
Inline blocks
Float
Slide 7
Slide 7 text
Tables
Seriously?
Semantic? NOPE
Responsive? NOPE
Vertical align? YUP *
Order? NOPE *
Slide 8
Slide 8 text
How about
d
i
s
p
l
a
y
: t
a
b
l
e
;?
Semantic? YUP *
Responsive? YUP*
Vertical align? YUP *
Order? NOPE *
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
.
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
Slide 11
Slide 11 text
Inline Block
Semantic? YUP
Responsive? YUP *
Vertical align? ALMOST
Order? NOPE *
Slide 12
Slide 12 text
What's the matter?
Vertical stretch an element is impossible
Order is still a view issue
but...
BUT...
Slide 13
Slide 13 text
White Space
Slide 14
Slide 14 text
Float
Semantic? YUP
Responsive? YUP *
Vertical align? AHAHAHAHAH NOPE
Order? NOPE *
Slide 15
Slide 15 text
Why not?
Clear x
Block Formatting Context
Impossible to manage vertical alignment
The holy grail
Slide 16
Slide 16 text
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...
Slide 17
Slide 17 text
They are all hacks
Slide 18
Slide 18 text
Why Flexbox?
Semantic? YUP
Responsive? YUP
Vertical align? YUP
Order? F*CK YEAH
Slide 19
Slide 19 text
The holy grail
SEE IT IN ACTION
Slide 20
Slide 20 text
It's all there?
Nope
Slide 21
Slide 21 text
But rst some important knowledge
Slide 22
Slide 22 text
Di erences between container and item
d
i
s
p
l
a
y
: f
l
e
x
;
Flex item Flex item Flex item
Slide 23
Slide 23 text
Direction
------ direction row ------>
Flex item Flex item Flex item
C
o
l
u
m
n
Flex item
Flex item
Flex item
Slide 24
Slide 24 text
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
%
;
Slide 25
Slide 25 text
Let's see all the rules!
Slide 26
Slide 26 text
Responsive without media query!
You can use ex basis to manage a min-dimension
EXAMPLE
Slide 27
Slide 27 text
Mix it with the old school!
You can starting use ex via beautiful enhancement!
EXAMPLE
Slide 28
Slide 28 text
But you can use media
query for beautiful thing
With order property!
EXAMPLE
Slide 29
Slide 29 text
RECAP
Flexible
Responsive
Ready for today
Slide 30
Slide 30 text
What's now?
Slide 31
Slide 31 text
Can I use?
Slide 32
Slide 32 text
How about old crappy explorer?
Don't worry:
A poly ll appears!
Slide 33
Slide 33 text
Is flexbox a
silver bullet?
Slide 34
Slide 34 text
No
Sorry, I've lied to you
A little
Slide 35
Slide 35 text
Flexbox is designed basically for:
content driven layout
component
not for grid
Take a look at css grid
Slide 36
Slide 36 text
But Grid CSS is not supported for
now
Slide 37
Slide 37 text
Any idea?
There are a few:
And my favourite one...
Flexboxgrid
Bootstrap - alpha 4
Slide 38
Slide 38 text
Super GiGi
Slide 39
Slide 39 text
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.
Slide 40
Slide 40 text
Links for you:
CSS Tricks guide to exbox
Learn exbox playing with exbox froggy
All the known exbox bugs
Autopre xer
Slide 41
Slide 41 text
Questions?