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.

0 shares
  • Pokepoke

    Good video Sam, cant wait for the followup!

  • jenniebeme

    Love the idea of flexbox! But unfortunately I’m not in a position to drop support for IE.

    • EzequielBruni

      And isn’t this the problem every time? IE. Sigh. One day…

    • http://tipigraphics.com/ Tzvi Perlow

      why…why! why! why do people still use the damn IE… ugh!

      • Francis Derequito

        True.. why?.. is there any reason why they still wanna use it?..

      • http://tipigraphics.com/ Tzvi Perlow

        Well, on second thought, why wouldn’t they? they don’t know it sucks at css etc.
        But again, someone needs to destroy that thing forever, or fix it! goddamit!

      • http://www.zell-weekeat.com/ Zell Liew

        When I was still using IE a while back and not touching any designs, I didn’t know it sucks at CSS too. The only major thing I noticed that was IE was INCREDIBLY SLOW.. And for that reason, I can’t understand anyone sticking to IE.

        Unfortunately, they still use em :(

      • http://tipigraphics.com/ Tzvi Perlow

        Haha, love this one http://memeblender.com/wp-content/uploads/2013/04/no-meme-accidental-click.jpg
        gotta give this to all clients and friends. Boycott IE

      • Francis Derequito

        IE should be DESTROYED!!! :D hahaha

      • http://twitter.com/somedaysoon01 Carmen Lachapel

        This had me crying! hahahaha!

      • fargo7289

        I know.. it’s the most frustrating thing…. we would have so much more flexibility and options as to what we could do w/o that retarded browser…

      • http://www.facebook.com/vinaynkashyap Vinay Kashyap

        We need IE to download Chrome or FF after installing Windows…

      • samuel8a

        That’s not a problem in Linux or Mac :P

  • http://www.logix7.com/ abkimmortal

    Great Article ! Thanx ! :)

  • Francis Derequito

    Nice Video!.. it caught my eyes and imagination.. Can’t wait for the nex video.. :)

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

    I’d really like to see some more indepth explanation of some more of flex-boxes properties, and their cross browser syntax. Such as the justify, alignItems, alignContent, they seem powerful but quality documentation is lacking

  • http://www.facebook.com/people/Croc-Ography/100003578319874 Croc Ography

    Useless not web standards yet.

  • Antish Chauhan

    awsome

  • http://twitter.com/somedaysoon01 Carmen Lachapel

    This was SUCH a great video! Thank you!

  • Colin Horn

    IE 10 shows support to flex boxes. But has it’s own prefix of -ms-flex. IE9 downwards doesn’t show support, so once 8-9 dies a death I’ll be happy to use this. And with the use of LESS CSS you can get rid of having to type in the browser specifics prefixes every single time :)

  • Harish

    Nice article ! it is very useful for me. Thanks !