Flexbox is cool and fun

A quick session on how we've applied default flex properties to the element in the GoCardless Pro Dashboard, our web app for managing your recurring payments, customers & more.

Transcript

1. Flexbox is cool and fun
2. Imagine an app
4. Boom What up
5. Boom What up Tom’s Legitimate Laundrette
6. Boom What up Tom’s Legitimate Laundrette
7. Boom What up Tom’s Legitimate Laundrette
8. Boom What up Tom’s Legitimate Laundrette Admin lyf
9. Boom What up Tom’s Legitimate Laundrette Admin lyf WTF LOL
10. <div class=“layout”> <div>Me</div> <div class=“layout__flex”> You </div> </div> Me You
11. .layout { display: flex; } .layout__flex { flex: 1 1 auto; }
12. .layout { // Flex container display: flex; } .layout__flex { // Flex item flex: 1 1 auto; }
13. <div class=“layout”> <div class=“layout”> <div>Me</div> <div class=“layout__flex”> Us </div> </div> <div class=“layout__flex”> <div>You</div> <div class=“layout__flex”> <div class=“layout”> <div>Them</div> <div class=“layout__flex”> Everyone else </div> </div> </div> </div> </div>
14. <div class=“layout u-full-height”> <div class=“layout”> <div>Me</div> <div class=“layout__flex”> Us </div> </div> <div class=“layout__flex”> <div>You</div> <div class=“layout__flex u-relative”> <div class=“layout u-absolute u-full-width u-full-height”> <div>Them</div> <div class=“layout__flex layout__flex—-no-shrink”> Everyone else </div> </div> </div> </div> </div>
15. <div class=“layout u-full-height”> <div class=“layout”> <div>Me</div> <div class=“layout__flex”> Us </div> </div> <div class=“layout__flex”> <div>You</div> <div class=“layout__flex u-relative”> <div class=“layout u-absolute u-full-width u-full-height”> <div class=“layout”> <div class=“layout u-full-height”> <div class=“layout”> <div>Me</div> <div class=“layout__flex”> Us </div> </div> <div class=“layout__flex”> <div>You</div> <div class=“layout__flex u-relative”> <div class=“layout u-absolute u-full-width u-full-height”> <div>Them</div> <div class=“layout__flex layout__flex—-no-shrink”> Everyone else </div> </div> </div> </div> </div> </div> <div class=“layout__flex layout__flex—-no-shrink”> Everyone else </div> </div> </div> </div> </div>
19. div { display: flex; flex: 1 1 auto; flex-direction: column; }
20. div { /* All divs are flex containers */ display: flex; /* They’re also all flex items */ flex: 1 1 auto; /* Stack divs vertically - maintain default div behaviour */ flex-direction: column; }
21. .u-flex-none { flex: none; }
22. <div class=“layout”> <div>Me</div> <div class=“layout__flex”> You </div> </div> Me You
23. <div class=“u-direction-row”> <div class=“u-flex-none”> Me </div> <div>You</div> </div> Me You
24. <div class=“layout layout—vertical”> <div>Me</div> <div class=“layout__flex”> You </div> </div> Me You
25. <div> <div class=“u-flex-none”> Me </div> <div>You</div> </div> Me You
26. <div class=“u-direction-row”> <div class=“u-flex-none”> Me </div> <div> <div class=“u-direction-row”> <div class=“u-flex-none”> <div class=“u-direction-row”> <div class=“u-flex-none”> Us </div> <div>You</div> </div> </div> <div>Them</div> </div> </div> </div>
27. <div class=“u-direction-row”> <div class=“u-flex-none”> <div class=“u-direction-row”> <div class=“u-flex-none”> Me </div> <div> <div class=“u-direction-row”> <div class=“u-flex-none”> <div class=“u-direction-row”> <div class=“u-flex-none”> Me </div> <div>You</div> </div> </div> <div>You</div> </div> </div> </div> </div> <div> <div class=“u-direction-row”> <div class=“u-flex-none”> <div class=“u-direction-row”> <div class=“u-flex-none”> Me </div> <div class=“scrolling-component”>You</div> </div> </div> <div>You</div> </div> </div> </div>
28. align-items Just do it align-items justify-content flex-direction: row;
29. align-items Just do it justify-content align-items flex-direction: column;
30. align-items Just do it Layout headaches Flexbox
31. Thanks Go away