How to Use the Flexbox Layout Method (Part 2)

Sam Piggott By Sam Piggott  |  May. 15, 2013

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll also be discussing the advantages of rearranging and resizing responsive elements in a flash, and what that means for your next project’s workflow. At this rate, we’ll hopefully be seeing the back of those pesky clearfixes in the near future!


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.