Skip to content
Page Utils

Flexbox Generator

A flexbox generator lets you set flex-direction, flex-wrap, justify-content, align-items, align-content, and gap on a container — plus flex-grow, flex-shrink, flex-basis, order, and align-self on each item — and watch a live preview update. Copy the CSS, an HTML skeleton, or Tailwind classes. Everything runs in your browser.

Updated

CSS Flexbox lays children out along one main axis. The container decides direction, wrapping, and how free space is shared (justify-content on the main axis, align-items and align-content on the cross axis); each item can grow, shrink, start from a basis size, change its visual order, or override its own cross-axis alignment with align-self. This page wires every one of those properties to a control and renders a real flex container, so what you see is what the browser will do with the copied CSS.

Start from a preset — center anything, navbar, equal columns, sidebar plus main, wrapping cards, sticky footer, or push the last item right — then adjust. The CSS output skips values that equal the CSS initial value (tick Include default values to see them all), writes the flex shorthand for items, and targets items with :nth-child so you can rename classes to fit your markup. The Tailwind tab maps the same layout to utility classes such as flex-col, justify-between, gap-4, flex-1, and basis-[240px]. Nothing is uploaded, saved to localStorage, or sent to an API. It is a layout helper, not a full page builder or a CSS Grid generator.

Flexbox playground

4 items

Presets

Container

Only applies when flex-wrap is wrap or wrap-reverse.

Item 1

auto, content, 0, or a length like 200px, 25%, 12rem.

Live preview

Click an item in the preview to edit it. Drag the preview corner to resize and watch wrapping. Nothing is saved or uploaded.

.container {
  display: flex;
  gap: 12px;
}

The generator writes standard CSS Flexbox (and Tailwind utility classes) from the controls above. It runs entirely in your browser — no network calls, no localStorage, no account. Item rules use :nth-child selectors; rename the classes to match your markup.

How does the Flexbox Generator work?

  1. 1. Pick a preset or start blank

    Choose a layout such as Center anything, Navbar, Equal columns, Sidebar + main, Wrapping cards, or Sticky footer. Presets only fill the controls; you can change every value afterwards.

  2. 2. Set the container

    Choose display, flex-direction, flex-wrap, justify-content, align-items, align-content (active when wrapping), and row/column gap in pixels. The preview re-renders on every change.

  3. 3. Tune each item

    Click an item in the preview or its number button, then set flex-grow, flex-shrink, flex-basis (auto, 0, px, %, rem…), order, and align-self. Add or remove items (1–12) and drag the preview corner to test wrapping.

  4. 4. Copy the code

    Copy the CSS (container rule plus :nth-child item rules), a matching HTML skeleton, or the same layout as Tailwind utility classes. Nothing is stored; Reset or close the tab to start over.

Questions about Flexbox Generator

What is a flexbox generator?
A flexbox generator is a visual editor for CSS Flexbox. You change container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and item properties (flex-grow, flex-shrink, flex-basis, order, align-self), see a live preview, and copy the resulting CSS. This one also outputs Tailwind classes and runs entirely in your browser.
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis — horizontally for flex-direction: row, vertically for column. align-items positions items on the cross axis, the other direction. Switch flex-direction in the generator and watch how the same two values move items along different axes.
When does align-content do anything?
align-content only affects a multi-line flex container, so it needs flex-wrap: wrap or wrap-reverse and enough items to form more than one line. It distributes the lines themselves on the cross axis. On a single-line (nowrap) container it has no effect, which is why the generator disables it until wrapping is on.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Every item with flex: 1 starts from zero size and shares free space equally, which gives equal-width columns. The Equal columns preset uses this; in Tailwind it is the flex-1 class.
How do I center a div with flexbox?
Put display: flex on the parent, then justify-content: center and align-items: center. The parent needs a height (or min-height) for vertical centering to be visible. The Center anything preset writes exactly those three declarations.
How do I stop a flex item from shrinking?
Set flex-shrink: 0 on that item, usually with a fixed flex-basis such as 240px. That is the Sidebar + main preset: the sidebar is flex: 0 0 240px and the main area grows with flex: 1 1 0. In Tailwind the sidebar becomes shrink-0 basis-[240px].
Does the order property change the HTML or accessibility order?
No. order only changes visual placement. Screen readers, keyboard tab order, and copy-paste still follow the source HTML order, so use it sparingly for visual tweaks rather than to fix content order. The same applies to row-reverse and column-reverse.
Is anything uploaded or saved?
No. The preview, CSS, HTML, and Tailwind output are computed in this tab with plain JavaScript. The page makes no network requests for your layout, does not write to localStorage, and does not need an account. Reset or close the tab to clear it.

What else can I open?

These tools run in your browser. Page Utils does not store, upload, or write to localStorage the keys, tokens, or text you paste. Results are a convenience aid, not legal, tax, or security advice.