Using CSS Flexbox: How to craft responsive layouts without grid systems – Mike Earley

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. 3 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 Cardinal Health, Mike Earley has been using CSS Flexbox in Cardinal’s commercial applications for over 2 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.

Copyright © 2015 Stir Trek Conference, Inc.

All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law.