Stefano CappelliniSC

AI • Deep Learning • Machine Learning • Software Engineering

Introducing (yet another) Flex Playground

Written on

; In: , , ,

Hello! I've decided to start publishing all the tools I wrote/I'll write for myself or for educational purpose.

This is the first one, Flex playground: you can find/try it here stefanocappellini.it/flex-playground/ (If you prefer, I've also made a short video to show it in action: youtube.com/watch?v=viBT1MaGr1E).

What's this?

As the name may suggest, it allows the user - at least, that's the aim - to easily experiment with CSS Flexbox layout, test ideas and (maybe) learn. There are lots of Web app like this out there, but no one suited my needs and that’s why I built it.

You can:

  1. Customize the flex container (setting the width, height, flex-direction, flex-wrap, justify-content, align-content, align-items, row-gap and column-gap properties)
  2. Change the number of items (its children)
  3. Define an overall style for all those items (setting the align-self, flex-grow, flex-shrink, flex-basis, min-width, min-height, margins properties)
  4. And even override that overall style, customizing each item individually (the items having some customization are marked with a green background instead of the standard orange one).

All the changes you make are obviously immediately reflected on the UI. This Web App is made with React and I tried to make it as light, fast as possible, removing all the distracting elements and decluttering the UI: for example, the elements are simple orange/green boxes with a number, nothing more.

Noting fancy, it’s a very simple tool but it helped (and helps) me understand how the various Flexbox properties relate to each other, how they interact and to check how the various browsers support them. I'm still using it for quick prototyping. I hope you will find it useful too (use it: it is free, it does not make use of cookies or ads).

Still growing...

There is still a lot to be done: some code cleaning, testing (both ui and functional/unit), some UI polishing, some minor known, annoying, issues to be fixed, especially on mobile and on Windows (and there is the order property still missing!), handle IE (or not?). Then, I think I'll release it on Github and I'll probably move it to a more neutral domain.

To summarize...

Please, keep in mind that I am absolutely not a frontend guru (I work mostly as a backend sw engineer and with ML)!

Comments, suggestions are really welcome, criticisms too! If you have any questions, I'll be happy to answer them all.

Try it!

As I said, it's completely free (no costs, no subscriptions, no ads, no cookies, ...). I hope you'll find it useful, let me know! Here is the link: https://www.stefanocappellini.it/flex-playground/