CSS FlexBox Code Generator

FlexBox is a way to align and space - even size - items in a flexible way. The main, required, styling is applied to the containing element, with optional additional styling which can be applied to all, or specific, child elements depending on the situation. It has partial support in IE 10 and upwards, with a few kinks in Firefox and Android, but is fast being utilized for its strengths in flexible, responsive designs.

This flexbox CSS generator provides a visual way to try out some of the options.

FlexBox Container Options

These styles will be applied to the container of the items.

Display Positioning

Direction

Wrapping of Items Has no effect if items are all on 1 line.

Justify Content Basically horizontal alignment & spacing.

Align Items Essentially vertical alignment of items per line.

FlexBox Items Options

These styles will be applied to the elements in the container.

Check to Apply

Use Auto Size

Either use Auto or specify an initial size, items will need to wrap.

Flex Basis (Size)

Align Self Specific to AN item to over-rule align-items - here applied only to item #3.

For use of flex-gow and flex-shrink, see this article: Flex Grow Is Weird on CSS Tricks