Set direction, wrap, justify, align and gap on a live flex row, then copy CSS or Tailwind
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Put display flex on the parent, then justify-content places items along the row and align-items across it; justify-content center with align-items center centres a child both ways. On a child, flex 1 means grow 1, shrink 1, basis 0%, so it takes an equal share of the free space.
Pick a starting layout such as Center, Navbar or Cards, or start from a plain row.
Choose the direction, wrap, justify-content, align-items and the gap; the preview follows.
Click a box in the preview to set its grow, shrink, basis, order and align-self.
Copy the CSS, or switch to Tailwind to copy the classes.
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.
The container. Choose the direction (row or column, normal or reversed), whether items wrap onto new lines, justify-content along the main axis, align-items across it, align-content for wrapped lines, and the gap. Only values that differ from the browser defaults are written, unless you ask for all of them.
Each item. Click a box in the preview to change its grow, shrink, basis, order and align-self. The three sizing values are written as the shortest flex value that means the same thing:
| 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 |
The difference between flex: 1 and flex: auto matters: with a basis of 0 the items get equal widths, while auto shares only the space left after each item's own content.
Starting layouts. Center puts one box in the middle of its parent. Navbar spreads a logo, links and a button with space-between. Cards wraps boxes of at least 200px. Sidebar keeps a fixed 240px column beside one that grows. Stack and Sticky footer use a column.
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.
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.
Justify-content places items along the main axis, the direction of flex-direction: left to right in a row, top to bottom in a column. Align-items places them on the cross axis. Changing the direction to column therefore swaps which property moves items horizontally.
Writing flex: 1 sets flex-grow 1, flex-shrink 1 and flex-basis 0%. Every item with flex: 1 starts from zero width and takes an equal share of the space, so they end up the same width whatever their content. Use flex: auto instead to keep each item's own width and share only what is left.
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.
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 · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.