How to use the flexbox layout method (part 1)

How to use the flexbox layout method (part 1)

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 […]

Sam Piggott

Posted May 8, 2013

Posted May 8, 2013

thumbnail30 6With 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.

Sam Piggott

Sam Piggott

Sam Piggott is a young digital designer and self-confessed jack-of-all-trades from London, UK. When he's not designing/coding/drinking copious amounts of coffee, Sam loves learning new software and air-drumming to whatever's on Spotify. Follow him on twitter @Sam_Piggott.

Read Next

S U B S C R I B E N O W

Join to our thriving community of like-minded creatives!