How to use the flexbox layout method (part 1)

By Sam Piggott Posted May. 08, 2013 Reading time: Less than a minute

With every new revision of CSS, a plethora of new, exciting attributes come to light;  one of which being the understated display: flex approach.

The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).

In today’s guide, we’ll be discovering the advantages of utilising the flexbox technique in our own layouts.

Some great features of the new model include:

  • Easy ratio-based sizing; no need to touch your HTML
  • Reorder with a breeze by using integers within the stylesheet
  • Applies to all child elements within a correctly defined parent
  • No more clearfixes!


In part 2 we’ll be taking a look on how to take this even further, and turn your flexbox layout into a fully-fledged responsive design! 


Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.

Featured image/thumbnail, flexible image via Shutterstock.