Slide 1

Slide 1 text

Why Use Flexbox? Jay Shenk

Slide 2

Slide 2 text

CSS Flexible Box Layout Module

Slide 3

Slide 3 text

Pain Points • Floats weren't designed for layout (just content wrapping around an image) • Floats have to be cleared • Responsive design often requires many media queries • Whitespace between inline elements • Vertical alignment is problematic

Slide 4

Slide 4 text

Can I use Flexbox? http://caniuse.com/#feat=flexbox

Slide 5

Slide 5 text

body { position: relative; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Slide 6

Slide 6 text

body { display: flex; justify-content: center; align-items: center; }

Slide 7

Slide 7 text

body { display: flex; } div { margin: auto; }

Slide 8

Slide 8 text

nav ul { display: flex; flex-direction: row; /* default */ justify-content: space-around; }

Slide 9

Slide 9 text

@media screen and (max-width: 400px) { nav ul { flex-direction: column; } }

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

nav div { width: 49%; } .left { float: left; } .right { float: right; } nav div a { display: inline-block; }

Slide 12

Slide 12 text

nav { display: flex; justify-content: space-between; align-items: stretch; /* Default */ } nav div { flex: 0 0 49%; display: flex; } nav div a { display: flex; align-items: center; }

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

@media screen and (max-width: 400px) { img { order: -1; } }

Slide 16

Slide 16 text

Questions? @jay_shenk Resources for learning Flexbox: http://bit.ly/2kNgbAp