A Quick Discussion about Flexbox

10 minute lightning talk for Frontend North 2016 in Sheffield

Transcript

1. A QUICK DISCUSSION ABOUT FLEXBOX Kirsty Burgoine ~ @kirstyburgoine Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
2. Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
3. Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
4. FLEX {geddit?}
5. A BIT OF HISTORY…
6. LAYOUT MODES Before CSS3 we had 4 layout modes: ➤ Block layout - For laying out documents. ➤ Inline layout - For laying out text. ➤ Table layout - For tables, and ➤ Positioned layout - For explicit positioning. CSS3 introduced two new layout modes: ➤ Grid Layout - Spec not quite ready for use yet ➤ Flexbox - ? Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
7. WHAT IS FLEX BOX? It is really *powerful* way to *build* and control 
 elements / modules and 
 even layouts that can 
 *flex* and *grow* 
 (I did say all links would be tenuous) Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
8. THE PREDICAMENT Just a few of the CMS Systems that are available… Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
9. THE PREDICAMENT The client Your lovely website Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
10. YAY!
11. ABOUT FLEXBOX With flexbox you can control both the container element and the child elements of that container: flex-container { display: flex; } flex-items Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
12. ABOUT FLEXBOX - CHANGING DIRECTION flex-direction: row; flex-direction: column; .item-4 { order: 1; } .item-3 { order: 2; } .item-1 { order: 3; } .item-2 { order: 4; } Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
13. 
 .item-1, .item-2, .item-3 { flex-grow: 1; }
 .item-4 { flex-grow: 4; } ABOUT FLEXBOX - CHANGING ITEM WIDTHS Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
14. ABOUT FLEXBOX - EVEN SPACING .container { flex-flow: row wrap; justify-content: space-around; } Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
15. NO MORE ORPHANS… X Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
16. LET THE GAMES BEGIN…
17. MENU SYSTEMS Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
18. USING FLEXBOX EQUAL HEIGHT COLUMNS Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
19. THE PROBLEM WITH FLOATS Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
20. THE PROBLEM WITH FLOATS Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
21. EQUAL HEIGHT COLUMNS Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk .container { display: flex; } .item { flex: 1; }
22. USING FLEXBOX RE-ORDERING WITH MEDIA QUERIES Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
23. RE-ORDERING WITH MEDIA QUERIES .container { display: flex; flex-direction: column; @media all and (min-width: 50em) { flex-direction: row; } } Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk * This menu has been further adapted to only show section titles at this stage
24. RE-ORDERING WITH MEDIA QUERIES .container { display: flex; flex-direction: column; @media all and (min-width: 50em) { flex-direction: row; } } .item-promo { order: 10; @media all and (min-width: 50em) { order: 1; } } Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
25. SOME CAVEATS Phil Walton’s Flex Bugs: bit.ly/fen-flexbugs Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
26. SOME FALLBACKS 82.3% of browsers support Flexbox* ➤ Can I Use: bit.ly/fen-caniuse ➤ Browser Bug Searcher: bit.ly/fen-bbs ➤ Autoprefixer (part of the POSTCSS js plugin) is useful if you use 
 Grunt or Gulp in your workflow: bit.ly/fen-postcss ➤ Or have a look at using @supports: bit.ly/fen-supports * According to bit.ly/fen-caniuse Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
27. CSS GRID AND FLEXBOX Rachel Andrew’s Codepen using both Grid and Flexbox: bit.ly/fen-grid-flex Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk
28. FURTHER READING ➤ Flexbox in 5 minutes: bit.ly/fen-flexin5 * ➤ A Complete Guide to Flexbox: bit.ly/fen-cgf ➤ Flexbox Froggy: 
 bit.ly/fen-froggy ➤ Interface Patterns using Flexbox: bit.ly/fen-ipuf ➤ Designing CSS Layouts with Flexbox: 
 bit.ly/fen-layouts Kirsty Burgoine: twitter.com/kirstyburgoine fisheye-webdesign.co.uk * Thanks to @adie_codes for sharing The Flexbox in 5 Minutes link on Twitter :)
29. FLEXBOX IS THE BOSS
30. THANKS FOR LISTENING HAPPY CODING ! :) Kirsty Burgoine Front End Developer @ Fisheye Tweet me: @kirstyburgoine Email me: info@kirstyburgoine.co.uk Invite me to your Slack Channel where I will mostly lurk… fisheye-webdesign.co.uk