Photograph of a flexbox presentation, shot at an angle

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


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


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 to learn more.