Linked: Flexulator: a visual tool for understanding CSS Flexbox

Until I started making this site last year, I hadn’t done any web development in a number of years. Once returned, I discovered that miracles had been worked in the meantime. Chief amongst these miracles was Flexible Box Layout, or Flexbox. I could wave goodbye to the tenuous old-style layout devices.

Though Flexbox works wonders, for a mind like mine, some of how it works isn’t easily understood. The ability for items to grow and shrink according to a numerical basis was a concept I had come to terms with not understanding properly.

The Flexulator is a tool to help visualise how these work. Whilst there’s still maths it’s easier to ignore and just play and see how it works. This definitely helps bridge the gap between reading the docs and getting the output you expect.