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. 5 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. As a User Experience Designer and UI Developer at Improving,
I have been using CSS Flexbox in various applications for over 3 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 a detailed layout involving flexbox--i.e. a full prototype of Google Inbox'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.