Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Flexbox
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
091/72 x 100%-x
Slide 5
Slide 5 text
Centering
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
.container { } .container .item1 .item2 .item3
Slide 8
Slide 8 text
.container { display: flex; }
Slide 9
Slide 9 text
.container { display: flex; align-items: center; }
Slide 10
Slide 10 text
.container { display: flex; justify-content: space-between; }
Slide 11
Slide 11 text
.container { display: flex; } .item2 { flex: 1; } .item2
Slide 12
Slide 12 text
.container { display: flex; flex-direction: row-reverse; } .item2 .item3 .item1
Slide 13
Slide 13 text
Browser Support
Slide 14
Slide 14 text
tl;dr 10+
Slide 15
Slide 15 text
“Old Syntax”? “Old Specification”?
Slide 16
Slide 16 text
Autoprefixer
Slide 17
Slide 17 text
.container { display: flex; align-items: center; justify-content: center; }
Slide 18
Slide 18 text
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
Slide 19
Slide 19 text
Browser Inconsistencies
Slide 20
Slide 20 text
philipwalton flexbugs
Slide 21
Slide 21 text
Use Flexbox!