Learn Flexbox with Webflow
Move circles into place by changing flexbox settings, no code needed
This flexbox game from Webflow asks you to move green circles into matching outlines. You do not write code. Instead, you select the Playground element and change its layout settings in a style panel, such as display, direction, wrap and the settings for each flex child.
Free · Browser · Beginner
About Learn Flexbox with Webflow
There are 28 levels, and each one is a little harder than the last. Because you use a visual style panel, it suits designers and beginners who want to understand flexbox before they write CSS by hand.
The game runs in the browser on Webflow University, where the page is titled Learn Flexbox with Webflow.