Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Flexbox Generator

Build a flex container with toggles and sliders, watch the numbered boxes rearrange live, then copy the CSS. Set direction, alignment, wrapping, and gap.

Preview
1
2
3
4
5
flex-direction
justify-content
align-items
flex-wrap
Container CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

Everything runs in your browser. Nothing is uploaded.

How to generate a CSS flexbox layout

  1. Set the direction and wrap

    Choose a flex-direction to lay items in a row or column, then pick a flex-wrap value to keep them on one line or let them wrap.

  2. Align the items

    Use justify-content to position items along the main axis and align-items to position them across it, watching the preview update.

  3. Adjust gap and item count

    Drag the gap slider to space the items apart and change the item count to test how the layout behaves with more or fewer boxes.

  4. Copy the CSS

    The container rule under the preview updates as you go, so click Copy CSS and paste it onto the parent element in your stylesheet.

Why use this tool

All the flex properties in one place

Set flex-direction, flex-wrap, justify-content, align-items, and gap from a single panel and see them combine in the preview.

Live preview you can resize

Numbered boxes rearrange as you change any control, and the item count slider adds or removes boxes so wrapping and spacing are easy to see.

Main axis and cross axis, side by side

justify-content and align-items sit next to each other, which makes the two-axis model of flexbox obvious as you flip direction.

Complete container CSS

The output is a ready-to-paste flex container rule with display, direction, wrap, alignment, and gap, ending in a closing brace.

Runs entirely in your browser

The preview and the CSS are generated on your device; nothing is uploaded, and there is no account or server.

About this tool

This flexbox generator builds a CSS flex container from a handful of controls and shows the result the moment you change one. Pick a flex-direction, choose how items sit along the main axis with justify-content and across it with align-items, turn wrapping on or off, and set the gap between items. The preview holds a set of numbered boxes that rearrange live, so you can read the layout by eye instead of guessing what a keyword does. The item count control adds or removes boxes, which is the fastest way to see how justify-content spreads free space and how wrapping breaks a long row onto new lines.

Flexbox has two axes, and most of the confusion comes from mixing them up. flex-direction sets the main axis: row lays items left to right, column stacks them top to bottom, and the reverse variants flip that order. justify-content moves items along that main axis, while align-items moves them across it, which is why centering something both ways means setting center on both. flex-wrap decides whether items shrink to fit one line or wrap onto several, and gap adds consistent spacing without margins. Watching all five change at once makes the model click faster than reading the spec.

The output is the container CSS only: display, flex-direction, flex-wrap, justify-content, align-items, and gap, ready to paste onto the parent element in your stylesheet. Nothing is uploaded and there is no account. Once the layout is set, the CSS border radius generator and box shadow generator style the boxes inside it, and the gradient generator fills their backgrounds.

Frequently asked questions

What is the difference between justify-content and align-items?
justify-content positions items along the main axis set by flex-direction, and align-items positions them across the cross axis. In a row, justify-content moves items left and right while align-items moves them up and down; in a column the two swap.
How do I center something both horizontally and vertically?
Set justify-content to center and align-items to center. With those two together the items sit in the middle of the container on both axes, whatever the flex-direction.
What does flex-wrap do?
nowrap keeps every item on a single line and lets them shrink to fit, wrap lets items flow onto new lines when they run out of room, and wrap-reverse does the same but stacks the new lines in the opposite order.
Does it generate CSS for the flex items too?
No. The output is the container rule that goes on the parent element. Properties like flex-grow, flex-shrink, and flex-basis belong on the individual items and are not part of this output.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server, stored, or logged.

Related tools