Compose Tailwind flexbox layouts visually — direction, justify, align, wrap and gap — watching items rearrange live, then copy the classes or the CSS equivalent.
Settings
Generated locally in your browser — your settings and results never leave this page.
Alignment you can watch
Flexbox confusion is almost always the main-axis/cross-axis swap: justify-content follows flex-direction, so switching to a column makes “justify” vertical. Instead of re-reading the spec, change the controls and watch numbered items move — then copy classes that are correct by construction.
Worked example
<!-- classic navbar -->
<nav class="flex items-center justify-between gap-4">
<div>Logo</div>
<div>Menu</div>
<div>CTA</div>
</nav>Patterns in the presets
- Navbar: row + justify-between + items-center — the most-typed flex line on the web.
- Centered stack: column + both centers, for empty states and modals.
- Tag cloud: wrap + small gap, where line breaks are welcome.
Modern notes
- gap-* replaced space-x/space-y as the idiomatic item spacing — it survives wrapping and has no first-child edge cases.
Limitations
- Per-item properties (grow, shrink, order, self-*) apply to children — the container classes here set the stage; the CSS version includes a flex:1 item example.
How to use the Tailwind Flexbox Generator
- Choose direction, justify, align, wrap and gap.
- Watch the numbered items rearrange in the dashed container.
- Copy the classes — or the plain-CSS equivalent for non-Tailwind projects.
Frequently asked questions
Why does justify-center stop centering when I switch to flex-col?
Because justify works along the MAIN axis, which flex-direction defines: in a column, justify controls vertical distribution and align-items takes over horizontally. The live preview makes this swap visible — the fastest way to internalize it.
How do I center something perfectly?
flex justify-center items-center — main and cross axis together. It is the "Perfect center" preset in the CSS sibling tool.
Where did space-x utilities go?
gap-* replaced margin-based space-x/space-y as the idiomatic spacing between flex items — it handles wrapping correctly and has no first/last-child edge cases.
