Tweet
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!