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 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.