Learning Flexbox

by
,

I've just, finally, learned how to use the flexible box layout, more commonly known as Flexbox. I'm not going to explain it as there are other sites that can do a far better job of that but just wanted to share some excellent resources for learning it as painlessly as possible.

I've delayed on learning it for what feels like years as I've had to support older browsers and trying to provide alternative layouts for old and new was just too much of a maintenance headache. Now I've learned it there's no looking back.

Here are 3 excellent resources to help learn it. They're all quite different but used together cover everything you could need.

  1. Flexbox.io

    This is a series of free video tutorials by Wes Bos. Each video is short and focuses on one step, which makes it easy to digest. It's very well explained, gives real examples and even details setting up AutoPrefixer to make it more cross browser compatible. I'd say this is the best place to start.

  2. FlexboxDefense.com

    This site by Channing Allen is a game that gets you to use your flexbox knowledge to position towers to defend against attackers. It's got 10 levels which increase in difficulty. It's fun and gives some good practice of actually using the code and seeing the results.

  3. CSS Tricks Complete Guide to Flexbox

    This is a great resource for reference as it lists everything you might want to know about flexbox all in one page. It includes nice graphics which explain the flow of content, Codepen code examples, details on the background, browser compatibility. Definitely one to bookmark. Great job as ever, Chris Coyier!