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.
Flex utilities without the guesswork
Flexbox has a small number of properties and a large number of ways to get them subtly wrong. This produces the Tailwind classes for a layout you describe and shows the result, which is faster than recalling whether items-center is the cross axis or the main one.
Worked example
flex items-center justify-between gap-4 flex establish the container items-center cross axis (vertical, by default) justify-between main axis (horizontal, by default)
The axis that catches everyone
justify-* works along the main axis and items-* along the cross axis. Adding flex-col swaps which is which, so the same two classes centre vertically in a row and horizontally in a column. That single fact explains most flexbox confusion.
gap instead of margins
gap spaces children without adding a margin to the last one, so no negative-margin correction is needed. It is supported everywhere current and is simpler than every technique that preceded it.
Limits
Generates Tailwind utility classes; you still need Tailwind in your build to compile them. Everything runs in your browser.
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.
