Arrange a flex layout visually and copy the Tailwind classes for the parent and each child
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Set the flex layout with buttons and watch the preview, then copy the class list: flex flex-col, justify-between, items-center, gap-4 and so on. Each child gets its own classes such as flex-1, shrink-0 or basis-[240px]. Every class name was checked by compiling it with Tailwind CSS 4, so the CSS it gives is the CSS you designed.
Set the options you need, or start from the example.
The result is made again every time you change something.
Copy it or download it. Nothing was sent anywhere.
Flexbox lines children up in one direction and shares the free space between them. This generator shows a live flex container and writes the CSS for exactly what you see.
| You set | Written as |
|---|---|
| grow 1, shrink 1, basis 0 | flex: 1 |
| grow 1, shrink 1, basis auto | flex: auto |
| grow 0, shrink 0, basis auto | flex: none |
| grow 0, shrink 0, basis 240px | flex: 0 0 240px |
Tailwind. Switch the output to Tailwind to copy class lists such as flex flex-col items-center gap-4 for the parent and flex-1 or shrink-0 for each child. Every class was checked by compiling it with Tailwind CSS 4 and comparing the CSS. Gaps follow the 4px spacing scale, and any other size is written as an arbitrary value such as gap-[13px]. Nothing leaves your browser. Related tools: CSS Grid Generator, Border Radius Generator, Box Shadow Generator.
The rest of the article, and all 6 questions about CSS Flexbox Generator, are on the CSS Flexbox Generator page.
Give the parent display: flex, justify-content: center and align-items: center. The child then sits in the middle both ways. For vertical centring the parent needs a height, such as min-height: 100vh for a full screen. The Center preset above writes exactly these three lines.
Align-content positions whole lines of items, and a flex container only has more than one line when flex-wrap is wrap or wrap-reverse. On a single line it has no effect, so the generator writes it only when wrapping is on. Use align-items to position items within one line.
Yes. The gap property has worked in flex containers in Chrome and Edge since version 84, Firefox since 63 and Safari since 14.1. It replaces the old trick of margins on every child with a negative margin on the parent, and spaces only between items, never at the edges.
Each class list on this page was checked by compiling it with Tailwind CSS 4 and comparing the CSS it produces with the CSS beside it. Gaps use the 4px spacing scale, so 16px is gap-4, and sizes off the scale become arbitrary values such as basis-[240px].
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Flexbox Generator and anybody who knows can answer. No account needed.
Same job, other tools: Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file.