Why Use Flexbox? Jay Shenk 

CSS Flexible Box Layout Module 

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 

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

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

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

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

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

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

No content

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

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; } 

No content

No content

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

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