interactive

Flexbox Generator

Flexbox Generator

Layout with CSS Flexbox is powerful but complicated. So we made this:
a quick playground for testing your css with flex layout tricks.

Howdy!
direction of content flow
RowColumn
Reversed
controls how wrapping works
NowrapWrapWrap Reverse
align along the content flow ( main direction )
StartEndCenterSpace BetweenSpace Around
vertical align within a line ( cross direction )
AutoStartEndCenterBaselineStretch
vertical align within container
StartEndCenterSpace BetweenSpace AroundStretch
controls the proportion of size growing
controls the proportion of size shrinking
set basis of size of flex items
margin around items
ImageBlockText
HeightWidth
Add :after placeholder
Get CSS

Preview

{{tags[$index % tags.length]}}

So, its 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.


Do you cover every flexbox attribute here?

`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 `Add :after placeholder` button. It has the effect as `flex: 999 999 auto` which consumes all space in the last line of your content.


Why did you build this?

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!


make your own animation with thousands of icons in loading.io!