Navigation

How to use the flexbox layout method (part 2)

By Sam Piggott | HTML, Web Design | 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.

Share this post
Comments (no login required)
  • Media3

    Thanks for posting this interesting article. I’ve been searching for training class on flexbox layout and i finally found it….! Thank you:) Good post and keep it up!

  • http://imperishableinheritance.com/ Chris Poteet

    It was a good video, but it uses old ideas for responsive: px instead of em, display: none, talking about “breakpoints”, and using devices as a guide for responsive sizes. Not taking away from this because it was a good demonstration.

    • Jimmy

      If he shouldn’t be talking about “breakpoints” or using devices as a guide for responsive size, when what are the newer alternatives? I’m not trying to argue really, I’m just curious as to what is the latest best practices.

  • Nathan Rutman

    Very fascinating. Love these videos—thanks for putting these together.

  • http://www.facebook.com/eldermichael.patterson Michael Patterson

    IE 10 has some basic flexbox support. Not all features are working yet but some are. I know for sure that Order, Direction, and Flex Value are working… Here is the display:

    -ms-flexbox;

    -ms-flex: @values;

    -ms-flex-direction: @row/column;

    -ms-flex-order: @val;

    I think some other features are also available, but I’ve gotten these ones to work personally. With IE 11 I hear that they will be catching up a bit. Lets all pray for mandatory browser updates next spring.

    I’m having allot of trouble getting Firefox to do anything in Flexbox. If anyone knows any tips on that, much appreciated

  • http://www.facebook.com/Daniele.Pavinato Daniele Pavinato

    Sounds good! Very interesting. Is flex supported by Intenret Explorer?
    In this video i hear you about Foundation… what did you say about that framework in relationship flexbox?

  • http://www.facebook.com/Daniele.Pavinato Daniele Pavinato

    Fantastic video. What did you say about the foundation framework?

  • Arjun

    Great video…. Thanks

  • bob

    IE 10 supports flexbox… it support also grid layout…

  • Daniele

    I’m not sure the involvement of the flexbox method… Will it substitutes the grid layout?