Layout with CSS Flexbox is powerful but complicated. So we made this:
a quick playground for testing your css with flex layout tricks.
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.
`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-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.
You can add a :after pseudo element in container with the
`Add :after placeholder` button. It has the effect as
`flex: 999 999 auto` which consumes all space in the last line of your content.
I often use flexbox to layout things and I found it's frustrating to test all attributes again and again everytime, so why not just having a nice, easy interface to bootstrap all these things up? And Now it's here, I use this every time building a flexible layout, and I suggest you to bookmark this in your web design toolbox too.
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!