Why Use Flexbox?

Examples from the talk on Codepen: http://codepen.io/collection/DEgbqk/

Additional resources for learning Flexbox: https://gist.github.com/jayshenk/ae9a5d7641533f3fd683a529a7fe020b

Transcript

1. Why Use Flexbox? Jay Shenk
2. CSS Flexible Box Layout Module
3. 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
4. Can I use Flexbox? http://caniuse.com/#feat=flexbox
5. body { position: relative; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
6. body { display: flex; justify-content: center; align-items: center; }
7. body { display: flex; } div { margin: auto; }
8. nav ul { display: flex; flex-direction: row; /* default */ justify-content: space-around; }
9. @media screen and (max-width: 400px) { nav ul { flex-direction: column; } }
11. nav div { width: 49%; } .left { float: left; } .right { float: right; } nav div a { display: inline-block; }
12. 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; }
15. @media screen and (max-width: 400px) { img { order: -1; } }
16. Questions? @jay_shenk Resources for learning Flexbox: http://bit.ly/2kNgbAp