Flexbox Generator

Flexbox Generator

a quick flexbox playground for testing your css with flex layout tricks.

Flexbox is quite useful nowadays but sometimes it's quite frustrating to test all attributes again and again everytime. Why not just having a nice, easy interface to bootstrap all these things up? Thus now we are here - a flexbox playground for on-demand CSS generation. We now use this every time when we need to build a flexible layout, and we also suggest you to bookmark this in your web design toolbox too.

Browser Compatibility

Good news: every modern browser supports flexible box layout (flexbox) now. Yet unfortunately IE <= 9 don't support flexbox, and IE10/11's support are buggy. Check out Can I Use..? for more detail about browser compatibility.

tl;dr - You'll need a graceful degradation for IE <= 11.

Attribute Coverage

order, which controls the order of flex items, doesn't cover here since it will need to config with a by-each-item basis. flex-grow, flex-shrink and flex-basis are similar yet we still provide the ability to config them with a single, identical value for every single item.

align-self isn't covered too, which is used to overwrite align-items in specific item.

tl;dr - We don't provide testing for attributes that works over single item basis.

What is the :after placeholder?

You can add a :after pseudo element in container with the placeholder button. It has the effect as flex: 999 999 auto which consumes all space in the last line of your content.

More Stuffs

We also provides micro animation solutions with thousands of icons in loading.io for you to enrich your website and projects, don't forget to check it out!

make your own animation with loadingio's icon library