Learn Alignment by Playing Flexbox Games

Flexbox introduced a lot of new CSS lingo. Justify-content? Space-between? Align-self? It can get confusing fast. But to use Flexbox — to really use it — you need to memorize all these words. You need to know them cold.

And guess what? All of this terminology isn’t just useful for Flexbox. It’s part of CSS Grid spec, too. In fact, it’s becoming so important, the CSS Working Group pulled this part of the spec out of Flexbox and put it into it’s own new spec: The CSS Box Alignment Module. Eventually these properties will work in block containers and multicol containers.

The time you spend studying and memorizing this new terminology will pay off. It’s time to pretend you are back in school. Flashcards anyone?

Or… maybe not. There are some fun games popping up that will drill the concepts into your fingers. Here are two:


If you know of any others, drop links in the comments. And if you are about to make yet another Flexbox 12-column grid framework, please don’t. Make an Alignment game instead!