Flex Box demo app screenshoot

Category: Hacks

Learn FlexBox in minutes.

A few years ago, I conducted a session with individuals who were beginning their journey as front-end developers. It was quite surprising to me that they were having difficulty understanding FlexBox. To assist them, I created this demo using TailwindCSS classes - it might be of help to you too!


Try it!

Just add a few boxes and play with radio buttons.
By clicking them you only change classes of the playground container div (with white background). Classes assigned to colourful boxes are never updated after they have been generated (random: background, width and height).
If you want to see under the hood, check it on Codepen or clone from Github.


The Ace 2.0
Michal's assistant eye