Skip to main content
iotools.cloudiotools.cloud

CSS Flexbox Generator

Build a CSS flexbox container rule from flex-direction, flex-wrap, justify-content, align-items, align-content, and gap controls — copy the ready-made .container {} block into your stylesheet.

Input

Output

CSS
Was this helpful?

Guides

What is Flexbox?

Flexbox (display: flex) is the CSS layout model for arranging items in a single row or column, distributing space between them, and aligning them without floats or manual positioning. It's the default choice for navbars, toolbars, card rows, form controls, and any layout where items need to line up and share space predictably. This tool builds the container side of flexbox — the rule you put on the parent element that turns its direct children into flex items.

The properties this tool generates

  • flex-direction — the axis items flow along: row (left to right), row-reverse, column (top to bottom), or column-reverse.
  • justify-content — how items are spaced along the main axis: flex-start, flex-end, center, space-between, space-around, or space-evenly.
  • align-items — how items are aligned along the cross axis: stretch (default, fills the container), flex-start, flex-end, center, or baseline.
  • flex-wrap — whether items stay on one line (nowrap) or wrap onto multiple lines (wrap, wrap-reverse) when they run out of room.
  • align-content — how multiple lines of wrapped items are spaced within the container. This only has a visible effect once flex-wrap is wrap or wrap-reverse — on a single line there's nothing for it to distribute, so the tool leaves it out of the CSS entirely when flex-wrap is nowrap.
  • gap — fixed spacing between items, in pixels, without needing margins on individual children.

How to use this tool

  1. Pick a flex-direction to set the main axis of your layout.
  2. Set justify-content and align-items to control spacing and alignment along the main and cross axes.
  3. Turn on flex-wrap if you want items to wrap onto new lines instead of overflowing or shrinking — this reveals the align-content control for spacing between the wrapped lines.
  4. Drag Gap to set consistent spacing between items.
  5. Copy the generated CSS from the CSS box, or download it as a .css file, and apply the class (or adapt the selector) to your flex container's parent element in your stylesheet.

The output updates instantly as you adjust any control — there's no separate "generate" step.

FAQ

Why doesn't align-content show up in my CSS? It only appears when flex-wrap is set to wrap or wrap-reverse. With nowrap there's only ever one line of items, so align-content has no effect per the CSS spec — including it would just be dead code, so this tool omits it automatically.

What's the difference between align-items and align-content? align-items aligns items within their line on the cross axis. align-content aligns the lines themselves when there's more than one (i.e., when items wrap) and there's extra space in the container.

Does this cover per-item properties like flex-grow or order? Not currently — this tool focuses on the container-level rule that applies to every child at once. Per-item overrides (flex-grow, flex-shrink, flex-basis, align-self, order) are set individually with a separate rule per child (e.g. .item:nth-child(2) { flex-grow: 1; }) directly in your stylesheet.

Do I need to rename the .container selector? Yes — .container is just a placeholder so the CSS is ready to paste. Replace it with the class or selector of your actual flex parent element (e.g. .navbar, #header, .card-list).

Will this work in every browser? Yes. Flexbox has been supported unprefixed in all major browsers for many years, and gap on flex containers is supported in every modern browser as well.

Privacy

Everything happens in your browser. No CSS, values, or settings you enter are ever sent to a server — the declaration is generated and updated locally as you type.

cssflexboxflexgeneratorflex-directionjustify-contentalign-itemsalign-contentgapweb designlayout

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-flexbox-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "flexDirection": "row",
    "justifyContent": "space-between",
    "alignItems": "center",
    "flexWrap": "wrap",
    "alignContent": "stretch",
    "gap": "16"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-flexbox-generator` tool (CSS Flexbox Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads