Flexbox Generator

How to use Flexbox Generator

Flexbox distributes items along a main axis, then aligns them on a cross axis. Switching direction changes which physical axis each alignment control affects.

1. Choose row or column, including reverse variants. Wrapping allows items to move into additional lines when space runs out.
2. Main-axis alignment controls leftover space along the direction. Cross-axis alignment controls the perpendicular direction. Gap inserts consistent space between items.
3. For every child, tune grow, shrink and basis. Grow shares extra space, shrink absorbs shortages, and basis sets the initial main-axis size. Order changes visual order; align-self overrides the container for one item.

A practical starting point

A wrapping row with equal growing items can make a compact toolbar adapt without a separate breakpoint.

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; }
.toolbar > * { flex: 1 1 140px; }

Common mistakes

• Changing visual order does not change DOM or keyboard order. Keep the source order meaningful.
• A child’s automatic minimum size can prevent shrinking. Consider min-width: 0 for overflowing text in a row.

Frequently asked questions