Skip to main content

Blog Post

Advanced Layouts with Flexbox

by Mario Hernandez
June 4, 2015

If you’ve been doing web design and development for a while you may remember the days when creating website layouts involved tables or browser specific techniques. Things got a lot better when we began using floats for creating layouts and this proved to be extremely successful. In fact, this technique is still widely used by most developers and designers because it works well and it allows us to build pretty sophisticated layouts.  

There are problems, however, with float layouts which, if not properly addressed, can create major issues including the lack of vertically align content and clearing floats which if not properly handled can break our layouts. There is no float center and when not clearing floats the right way we can end up with a lot problems in our hands.

Enter The Flexbox Layout (Flexible Box) module, which is currently a W3C Last Call Working Draft). The flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those have served us well, they are not as flexible for the reason outlined above.

One of the biggest advantages flexbox is the ability expands items within a flex container to fill available free space, or shrinks them to prevent overflow. Flex items can be arranged in any direction as individual items or group of items which is something that is extremely hard to do with the current float technique.

Below is a presentation I gave at the recent DrupalCon 2015 in Los Angeles where I go into detail about what flexbox is, how it works and how to better understand its various properties. Take a look at it for a more in-depth explanation of flexbox and how it solves many of the problems we currently face with float layouts.

 

 

Additional Resources

Why Good Markup Matters | Mediacurrent Blog Post
Exloring the Picture Module | Mediacurrent Blog Post

Mario Hernandez

Meet team member, Mario Hernandez

Mario is the Head of Learning at Mediacurrent with over 10 years of public speaking and training experience. He is a regular speaker and trainer at tech conferences including Drupal Camps in Los Angeles, San Diego, San Francisco, Washington DC, and others.  Mario is a co-host of the Mediacurrent podcast where guest speakers discuss Open Source solutions.

In addition to being the Head of Learning, Mario is a Senior Front-End Developer working on some of the world’s most popular brands. Mario has vast experience in all things Front End as well as Drupal.  He developed the very successful Component Based Development training workshop which has been conducted at DrupalCons throughout America and Europe.. Mario's strengths are training clients and their development teams through custom-tailored curriculums.

Learn more about Mario >

Related Insights