Flexbox Generator

About this tool

Flexbox is designed for arranging items along one main axis, yet the relationship between direction, justification, alignment, wrapping and gap is easier to understand visually than by memorizing property lists. The Flexbox Generator lets you change the container settings and immediately see how sample items move.

Use justify-content along the main axis and align-items along the cross axis; when flex-direction changes from row to column, those visual axes change with it. Enable wrapping when items should move onto another line instead of shrinking beyond a useful size. For two-dimensional layouts with explicit columns and rows, use the Grid Template Generator instead.

How to use it

1. Choose row or column direction based on the primary flow of the content.
2. Set justify-content to distribute items along that main axis.
3. Set align-items for their position on the cross axis.
4. Enable wrapping and choose a gap when items may span multiple lines.
5. Copy the container CSS, then add item-specific flex rules only where the layout requires them.

Useful ways to apply it

• Centering content horizontally and vertically inside a component.
• Building navigation bars, button rows and evenly spaced action groups.
• Creating responsive tag, badge or card rows that wrap naturally.
• Comparing space-between, space-around and space-evenly behavior.
• Teaching why alignment changes when the flex direction becomes column.