Does it show a live preview?

Yes. A live flex container preview updates as you change every property.

Does it support align-content for multi-line flex?

Yes. align-content is exposed when flex-wrap is set to wrap or wrap-reverse.

Yes. Individual grow, shrink, and basis values are combined into the flex shorthand automatically.

Yes. Add up to 8 test items with customisable content to see how items distribute in the container.

Adjust flex direction, wrap, justify, and align controls to get the corresponding CSS instantly.

demo

CSS Output