Building flexbox CSS without memorising the axes
A single-row menu, a centered card, a button cluster that shares the leftover width — each of these is one flex container. The annoying part is remembering which of justify-content and align-items follows the horizontal axis. This generator stacks the direction, alignment, wrapping and gap you pick into a declaration list, applies the same values to a live preview box, and prints CSS you can paste as it is.
What the output contains
The container block carries display, flex-direction, justify-content, align-items, flex-wrap and gap, with align-content added only when you choose one. Picking an item flex value adds a separate child-selector block, and choosing 1 1 0 also writes min-width: 0 so long text cannot push a column wider. Property names and keywords follow the W3C CSS Flexible Box Layout specification (as of October 2026).
What it does not do
It does not write per-item order or align-self rules, grid track declarations, or any transition. Grid tracks belong to the grid properties, and anything with a duration or an easing curve belongs to a transition tool. The preview is whatever your current browser renders, so on a real page the wrap points can move with the parent width and the font in use.
Frequently Asked Questions
With flex-direction row, justify-content runs horizontally and align-items vertically. Switching to column swaps the two roles.
gap only adds space between items, so no stray space appears at the outer edges. Matching that with margin means treating the first and last item separately.
With flex-wrap set to nowrap there is a single line, so it has nothing to distribute. Switch to wrap and it applies once items actually break onto a new line.