CSS

CSS Flexbox Generator

Direction, justify/align/content, wrap, separate row/column gap, adjustable item count, and per-item flex-grow/shrink/basis/align-self/order (click an item to edit it) -- with presets, randomize, and export to CSS, Tailwind, SCSS or React.

What this tool does

Builds a flex container AND lets each item inside it be edited individually — most flexbox generators only cover container properties, leaving per-item flex-grow/ flex-shrink/flex-basis to be written by hand.

Container controls

Direction (including both reverse variants), justify-content, align-items, align-content for multi-line wrapping, flex-wrap, and row/column gap set independently — covering the full set of flex container properties in one place.

Per-item editing

Click any item directly in the live preview to select it, then adjust its flex-grow, flex-shrink, flex-basis (any valid value — auto, 0, 120px, 30%), align-self, and order without affecting any other item. Items can be added or removed (up to 10) to test a layout with a different item count.

Presets and randomizing

Seven presets cover common patterns — a default row, everything centered, a space-between nav bar, wrapping cards, a column stack, a reversed row, and equal-width columns via flex-grow: 1 on every item — plus a randomize button for quick exploration.

Getting the CSS out

Export the container and every item's overrides as plain CSS (one rule per item), a Tailwind class string, SCSS, or a React style object — copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The layout is built and rendered entirely in the browser -- nothing is sent to a server.

Can I set flex-grow or flex-basis on just one item, not the whole container?

Yes -- clicking any item in the preview selects it, and the per-item panel then edits only that item's flex-grow, flex-shrink, flex-basis, align-self and order.

How many items can the preview hold?

Up to 10, added or removed with the item-count control -- useful for checking how wrapping or gap spacing behaves with more or fewer items.

What does the "Equal Columns" preset do?

It sets flex-grow: 1 and flex-basis: 0 on every item, the standard pattern for making a row of flex items share space equally regardless of their content width.

Can I randomize the layout instead of setting every option by hand?

Yes -- a randomize button picks a random direction, justify-content, align-items and gap values for quick exploration.

What export formats are available?

Plain CSS with the container rule and a separate rule per customized item, a Tailwind class string, SCSS, or a React style object -- selectable from a dropdown next to the code output.