Flexbox is one of the newest and most powerful systems for layout in web development, but can be challenging to learn due to its many new values. This reading list starts with the most fundamental properties (and most commonly used qualities), and will be expanded to more complicated lessons. The list also adds a series of resources to learn how to use flexbox with practice and games.

Time: 20 minutes

Prerequisites: Introduction to CSS, Selectors, The Box Model, Basic Page Layout

1. A Designer’s Guide To Flexbox
2. Going Vertical
3. Understanding Visual Weight
4. Order

Examples

This site has many examples of flexbox layout, most part of other reading lists:

1. Previous-Next UI Navigation
2. Vertically Aligning Wrapped Text
3. Crafting Better Responsive Image Galleries With Flexbox
4. A Semantic Logo with Flexbox Navigation

Resources

• Wes Bos has an excellent free video series on learning flexbox: “What the Flexbox”.
• Chris Coyier has an excellent one-sheet Complete Guide to Flexbox.
• The excellent Learn Layout site has a good resource on flexbox
• Philip Walton has a very good series of practical applications of flexbox to solve regular layout problems in his Solved By Flexbox series.
• There are a number of excellent games for learning flexbox: Flexbox Froggy and Learn Flexbox with Webflow.

Photograph by Jeffrey Zeldman, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.