Skip to main content

3 of the best resources for learning Flexbox

Generate San Francisco - Wes Bos

Learn about modern worklow and tooling for frontend developers with Wes Bos, and discover the incredible power of Flexbox with Vlad Magdalin, at both Generate San Francisco and London. Book now!

Flexbox is a CSS3 website layout model that allows responsive web design elements within a container, automatically arranged to different size screens or devices. For more information on what it does and how it can help you, read our guide to Flexbox.

If you want to learn Flexbox, and are looking for web design inspiration, there are some fantastic resources around. Of course, the best way is to start playing around yourself, but here are some top guides to get you up and running:

01. What the Flexbox?!

Flexbox: What the Flexbox

What the Flexbox?!

This is a free, 20-part video course by developer Wes Bos. Wes does a great job of explaining the concepts of Flexbox in bitesized chunks. Perfect for whenever you have a few minutes to spare.

02. Codrops' Flexbox reference

Flexbox: Codrops

Codrops' Flexbox reference

This article by Sara Soueidan is – like everything Soueidan writes – both comprehensive and easy to follow, explaining complex concepts well.

03. Flexbox CheatSheet

Flexbox: cheatsheet

Flexbox Cheatsheet by Joni Trythall

My absolute favourite is Joni Trythall's Flexbox cheatsheet cheatsheet. It can be hard to remember all the various Flexbox properties, and this is the perfect 'at-a-glance' guide.

More Flexbox! See Zoe Gillenwater's session on using Flexbox today at Generate Sydney on 5 September. There are three upcoming Generate conferences covering a wealth of subjects; get all the details here.

This is an edited excerpt from an article that appeared in issue 273 of net magazine; subscribe today!

Michelle Barker is a designer at Mud, with a passion for CSS.