Flexbox

CSS + Layout + Fun are three words you don't see together often. CSS has given us a raw deal when it comes to tools for building complex UIs, resulting in us resorting to all manner of hacks over the years. With the advent of Flexbox and the fact it has support across all "Evergreen" browsers, things are looking up. This talk will go into the features of Flexbox and how it makes building complex UIs easier.

Presented at DublinJS http://www.meetup.com/DublinJS/events/222570156/

Transcript

1. Flexbox Pat O’Callaghan === @patocallaghan === littleglitch.io
3. (╯°□°)╯︵ ┻━┻ Tables
4. Floats
5. Floats
6. Inline-block
7. absolute positioning
8. “The specification describes a CSS box model optimized for user interface design”
9. Flex Container and Items 1 2 3 .flex-container { display: flex; } .flex-items {}
10. Axes Main Axis Cross Axis 1 2 3 .flex-container { display: flex; flex-direction: row; }
11. Direction Main Axis 1 2 3 Cross Axis .flex-container { display: flex; flex-direction: row-reverse; }
12. Direction Main Axis 1 2 3 Cross Axis .flex-container { display: flex; flex-direction: column; }
13. Direction Main Axis 1 2 3 Cross Axis .flex-container { display: flex; flex-direction: column-reverse; } 1
14. Aligning content 2 ways to align content: • justify-content (Main axis) • align-items (Cross axis)
15. Aligning content Main Axis + Justify Content
16. Aligning content M + J
17. Aligning content
18. Aligning Content • Codepen
19. Wrapping • Still Codepen
20. Order • And stiiiiiill Codepen
21. Flexbox Froggy #1
22. Flexbox Froggy #2
23. Flexbox Froggy #3
24. Equal Height Columns * Two approaches we previously had to do were: * “faux columns” * Javascript
25. Centring in the unknown • position: absolute; left: 50%; margin-left: -{width of element}px • tables
26. Source Ordering • Responsive layouts can require moving content around at different screen sizes • Duplicate content and show/hide it per viewport • Use JavaScript to copy the content around the source • Flexbox order + media queries • Content Choreography demo
27. Source Ordering
28. 21+ 6.1+ 22+ 11+ Browser Support
29. Wrapping Up • Flexbox is ready for primetime now, get using it! • Its concepts may seem abstract and difficult at first • Allows you create complex layouts easily • No more hacks! • Lots of amazing resources out there today
30. Thanks! Questions?
31. References • Centering in the Unknown • Fighting the Space Between Inline Block Elements • GSS (Grid StyleSheets) • W3C Flexbox Spec • What the Flexbox?! • Flexbox Froggy • CSS Trick’s A Complete Guide to Flexbox • Flexbox Cheatsheet • Solved by Flexbox • Grid, Flexbox, Box Alignment: Our New System for Layout • Building For Content Choreography Using Flexbox • caniuse Flexbox • Flexibility: Old IE Flexbox polyfill