How do I center a div with flexbox using this tool?

Choose the Perfectly centered preset, which sets justify-content: center and align-items: center on the container. Then press Copy CSS and paste it into your stylesheet.

What flexbox properties can I change?

You can set flex-direction, flex-wrap, justify-content, align-items, align-content and Gap. You can also change the number of Items from 1 to 10 and the Preview height.

How do I see how flex-grow works on one item?

Click an item in the live preview to toggle flex-grow: 1 on it, and click it again to remove it. The generated CSS then includes an .item:nth-child rule for that item.

Are there starting presets, such as a navbar or card row?

Yes. Presets are Navbar, Perfectly centered, Sidebar layout and Wrapping card row. Each loads a set of values you can adjust afterwards.

Why does align-content seem to do nothing in the preview?

align-content only takes effect when items wrap onto several lines. In the preview it is applied only when wrap is not nowrap, so set flex-wrap to wrap first.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

↔️

Free CSS Flexbox Generator

Experiment with flex direction, wrap, justify and align on live items — and copy the CSS.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree foreverInteractive itemsCopy-ready CSS

Works offline once loaded

A visual flexbox playground: set direction, wrap, justify-content, align-items and gap, change the number of items, and click an item to give it flex-grow. The CSS updates live, ready to copy.

Presets

flex-direction

flex-wrap

justify-content

align-items

Gap: 12pxItems: 4Preview height: 176px

Tip: click an item in the preview to toggle flex-grow: 1 on it.

Live preview

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Everything runs in your browser — nothing is uploaded.

Common uses

Center a DivThe eternal question, answered visually.
Navbar LayoutLogo left, links right.
Equal-Height CardsCards that stretch to match.
Learn FlexboxSee every property live.
Space-BetweenPush items to the edges.
Vertical StackColumn layouts with gaps.

How It Works

An interactive flexbox playground: switch flex-direction, wrap, justify-content and align-items and watch up to 10 live items rearrange instantly. Click any item to give it flex-grow: 1 and see how it claims space. The CSS updates live, ready to copy into your project.

1
Set the container
Direction, wrap, justify-content, align-items, gap.
2
Add items
One to ten numbered flex items.
3
Experiment
Click an item to toggle flex-grow and see the effect.
4
Copy the CSS
The container (and item) rules, ready to paste.

Everything runs in your browser — nothing is uploaded.

Related Tools

🟦

CSS Grid Generator

Visually design a CSS grid — tracks, units and gaps — and copy the generated CSS and HTML.

Try it

🌈

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a live preview. Copy the CSS with one click.

Try it

🎨

CSS Box Shadow Generator

Visual builder for CSS box-shadow with live preview, multi-layer stacking, color picker, inset toggle, and one-click copy. Includes Material, neumorphism, and glow presets.

Try it

Free CSS Flexbox Generator

Common uses

How It Works

Related Tools

CSS Grid Generator

CSS Gradient Generator

CSS Box Shadow Generator

Frequently Asked Questions