Using CSS Flexbox: How to craft responsive layouts without grid systems
Since its inception, CSS has not handled combined vertical and horizontal layouts in an efficient manner. As developers, we started with tables, then graduated to floats and positioning, and then to grid systems. The mobile internet introduced even more complexity in our layout world, adding in media queries, polyfills, etc. In 2011, the W3C CSS committee introduced the flexbox specification, meant to allow for fully flexible horizontal and vertical layout management that works logically in multiple resolutions, without media queries. 6 years later, flexbox is finally becoming a mainstream solution. However, it isn't simple to use--there are undocumented 'quirks' that will frustrate even the most experienced CSS expert. Mike Earley has been using CSS Flexbox in a variety commercial applications for over 5 years. He has successfully implemented it in applications that were already using alternative layout systems, and has also built an application's layout structure using flexbox from the start. The session will cover the basics of the various flexbox properties, and then delve into detailed layouts involving flexbox--i.e. a full administration application's layout. The session will touch on some of the hidden concepts in flexbox, like the flex 'line', which is an undocumented 'feature' of flexbox.