An Interactive CSS Flexbox Playground

CSS flexbox is fantastic… but it’s also incredibly complicated. A flex container has half-a-dozen different CSS rules which control how content will flex and flow within the container, and figuring out the exact combination that you’ll need to implement a particular design can be a lengthy and error-prone process.

So I built a thing to make it a little easier to see what’s going on. It’s an interactive CSS flexbox playground. Based on - and with visuals inspired by - Chris Coyler’s excellent CSS Flexbox Layout Guide over at css-tricks.com, it’ll let you pick different values for all the various CSS flex properties and see how they affect your layout.

Check it out here:

https://dylanbeattie.net/tools/flexbox/

If you like this kind of thing, I’m running a couple of events next week talking about web standards - HTML, CSS, JavaScript, native browser APIs; all the cool stuff that used to require thousands of lines of JavaScript frameworks and polyfills that just works now because browsers are getting better all the time

On Monday 24th March I’m doing a ‘lunch & learn’ in Amsterdam:

https://www.meetup.com/amsterdam-java-user-group/events/306823736/?eventOrigin=your_events

then on Thursday 27th March, I’m running an online session with Tech Cornwall. 11:00-13:00 on Zoom, it’s free for members and £99 (+ VAT and booking fees) for non-members: check that out here:

https://techcornwall.co.uk/training/modern-fundamentals-of-web-application-development-masterclass/

Hopefully see you a few of you there.