What's the difference between flex-basis and width?

`flex-basis` is the item's size along the main axis *before* `flex-grow` and `flex-shrink` redistribute the leftover space; in a `row` it acts like width, in a `column` it acts like height — so it follows the axis, `width` does not. The other gotcha: when both are set, `flex-basis` wins over `width` (unless `flex-basis: auto`, in which case the item falls back to its `width` / content size). Use `flex-basis` when you want a starting size that the flex algorithm is allowed to grow or shrink from; use `width` for a hard size you don't want flex touching (and pair it with `flex-shrink: 0` so it can't be squashed).

Why isn't my justify-content doing anything?

Three usual causes. One, your items already fill the whole main axis (e.g. each has `flex-grow: 1`, or `flex: 1`) — there's no free space left to distribute, so every `justify-content` value looks identical. Two, you're trying to center vertically with `justify-content` in a `row` container — that's the cross axis, you want `align-items: center` instead (`justify-content` controls the main axis, which is horizontal in a row). Three, the container isn't actually `display: flex` (a stray `display: block` from a more specific selector wins). Toggle `flex-direction` here and watch which axis moves — that tells you instantly which property you actually need.

What does flex:1 expand to?

`flex: 1` is shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%`. The `flex-basis: 0%` part is the surprising bit: it tells the item to start from zero and take a share of the container proportional to its grow factor, which is why three children all set to `flex: 1` end up perfectly equal regardless of their content. Note this differs from `flex: auto` (= `1 1 auto`), where each item starts from its content size first and only *then* shares the remainder — so `flex: auto` children with different content end up different widths, `flex: 1` children don't. This tool emits `flex: 1` automatically when you set grow 1 / shrink 1 / basis 0%.

Why does align-content only matter after I turn on wrap?

`align-content` aligns the *flex lines* relative to each other along the cross axis — and you only have multiple lines when items wrap. In a single-line (`nowrap`) container there is exactly one line, so there is nothing to distribute and `align-content` is ignored entirely. Use `align-items` to align items *within* their line, and `align-content` to space the lines apart once `flex-wrap: wrap` produces two or more of them. This tool disables the `align-content` control while `flex-wrap` is `nowrap` so you don't waste time setting a value that can't take effect.

Does this send my layout anywhere?

No. The whole tool is a React island on a static page — there's no server endpoint, no telemetry on what you build. The one caveat: the shareable URL encodes your full config in the query string, so if you paste a "share link" into a public channel, anyone with it can reconstruct your layout. That's the point of the feature, but it's the only data that ever leaves your device, and only when you share.

Center a single element both horizontally and vertically

The classic "center a div" task. Set the container's `justify-content` to `center` and `align-items` to `center`, leave one item in the playground, and the box sits dead-center — main axis centered by justify, cross axis centered by align. Copy the two-line `.container` rule. This is the modern replacement for the old `position: absolute; transform: translate(-50%, -50%)` hack: no magic numbers, works at any container size, and survives content changes. Three seconds here versus a Stack Overflow search.

Build a navbar with a logo left and links pushed right

A header where the logo hugs the left edge and the nav links sit on the far right. Set `flex-direction: row`, then select the logo item and give it `flex-grow: 1` — it eats all the free space and shoves everything after it to the right. Or set `justify-content: space-between` with the logo as item 1 and the link group as item 2. Try both in the preview, see which spacing you prefer, copy the CSS. You've solved the single most common header layout without writing a `margin-left: auto` you'd have to remember.

Make three cards equal width regardless of content

A pricing row or feature grid where each card must be exactly one-third wide even though one has more text. Add three items, select each, set `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0%` — the tool collapses that to the clean `flex: 1` shorthand in the output. Now all three are forced equal because `flex-basis: 0` makes them start from zero and split the space evenly. Watch the preview: type a longer label into your real markup later and the columns stay equal, which `flex: auto` would not guarantee.

See exactly what wrap + align-content does before committing

You have a tag list or a gallery that wraps onto multiple rows and you're unsure how the rows should be spaced. Add eight items, set `flex-wrap: wrap`, shrink the preview width so they wrap to two rows, then cycle `align-content` through `flex-start`, `center`, `space-between`, `stretch` and watch the rows move. The control is disabled until you enable wrap, so you learn the dependency by doing. Pick the spacing that looks right, copy the CSS — no trial-and-error edit-save-refresh loop in your real project.

Reorder items visually without touching the HTML source

You need the third item to appear first on a specific breakpoint but can't reorder the DOM (it'd break tab order or a CMS field order). Select the item in the preview, set its `order` to `-1`, and it jumps to the front while the source order stays put. The playground shows the visual result immediately and the export gives you the `order: -1;` rule to drop into a media query. This is the accessible-friendly way to reorder for layout: visual order changes, source (and screen-reader) order does not.

Flexbox Playground & CSS Generator — every flex property, live preview, copy-ready CSS

Flexbox playground — toggle every container and item property on a real flex box and copy the exact CSS. direction, justify, align, gap, order, grow/shrink/basis, align-self. 100% client-side.

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Container properties

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

Items

Editing item 1

order

flex-grow

flex-shrink

flex-basis

align-self

Live preview

Click an item in the preview to edit it

Generated CSS

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

What this tool does

A hands-on Flexbox playground that doubles as a CSS generator. Change a container property and the preview — a real `display: flex` box, not a diagram — rearranges instantly, so you stop guessing what `justify-content: space-between` versus `space-around` actually looks like. Container side: `flex-direction` (row / row-reverse / column / column-reverse), `flex-wrap` (nowrap / wrap / wrap-reverse), `justify-content` (all six values incl. space-evenly), `align-items`, `align-content` (auto-disabled when nowrap, because it has no effect on a single line), and `gap` in any unit. Item side: add or remove items (1–12), click any box in the preview to select it, then set its `order`, `flex-grow`, `flex-shrink`, `flex-basis`, and `align-self`. The generated CSS only emits the properties you actually changed — defaults stay out, so the output is a clean, paste-ready `.container { … }` plus per-item `.item-N { … }` rules, with `flex: 1` / `flex: none` shorthands recognised automatically. Every control round-trips through the URL, so the link you copy lands a coworker on the exact same layout. No upload, no account, no tracking.

Tool details

Input: Text + Numbers; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 14 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How Flexbox Playground & CSS Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Center a single element both horizontally and vertically
The classic "center a div" task. Set the container's `justify-content` to `center` and `align-items` to `center`, leave one item in the playground, and the box sits dead-center — main axis centered by justify, cross axis centered by align. Copy the two-line `.container` rule. This is the modern replacement for the old `position: absolute; transform: translate(-50%, -50%)` hack: no magic numbers, works at any container size, and survives content changes. Three seconds here versus a Stack Overflow search.
Build a navbar with a logo left and links pushed right
A header where the logo hugs the left edge and the nav links sit on the far right. Set `flex-direction: row`, then select the logo item and give it `flex-grow: 1` — it eats all the free space and shoves everything after it to the right. Or set `justify-content: space-between` with the logo as item 1 and the link group as item 2. Try both in the preview, see which spacing you prefer, copy the CSS. You've solved the single most common header layout without writing a `margin-left: auto` you'd have to remember.
Make three cards equal width regardless of content
A pricing row or feature grid where each card must be exactly one-third wide even though one has more text. Add three items, select each, set `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0%` — the tool collapses that to the clean `flex: 1` shorthand in the output. Now all three are forced equal because `flex-basis: 0` makes them start from zero and split the space evenly. Watch the preview: type a longer label into your real markup later and the columns stay equal, which `flex: auto` would not guarantee.
See exactly what wrap + align-content does before committing
You have a tag list or a gallery that wraps onto multiple rows and you're unsure how the rows should be spaced. Add eight items, set `flex-wrap: wrap`, shrink the preview width so they wrap to two rows, then cycle `align-content` through `flex-start`, `center`, `space-between`, `stretch` and watch the rows move. The control is disabled until you enable wrap, so you learn the dependency by doing. Pick the spacing that looks right, copy the CSS — no trial-and-error edit-save-refresh loop in your real project.
Reorder items visually without touching the HTML source
You need the third item to appear first on a specific breakpoint but can't reorder the DOM (it'd break tab order or a CMS field order). Select the item in the preview, set its `order` to `-1`, and it jumps to the front while the source order stays put. The playground shows the visual result immediately and the export gives you the `order: -1;` rule to drop into a media query. This is the accessible-friendly way to reorder for layout: visual order changes, source (and screen-reader) order does not.

Common pitfalls

Using justify-content to vertically center in a row container — that's the cross axis, you want align-items. justify-content moves items along the main axis (horizontal in a row, vertical in a column).
Expecting align-content to do something on a nowrap container — it only spaces multiple flex lines, and nowrap has exactly one line. Turn on flex-wrap (wrap) first; this tool disables the control until you do.
Setting flex-grow to 1 on items then wondering why justify-content stops working — once items absorb all free space there's none left to distribute, so every justify-content value looks identical.
Confusing flex 1 (= 1 1 0%, forces equal sizes) with flex auto (= 1 1 auto, sizes start from content). If equal-width columns drift apart under different content, you used auto where you wanted 1.
Setting width on a flex item without flex-shrink 0 and being surprised it gets squashed — flex items shrink by default. Either pair width with flex-shrink 0, or use flex-basis with a 0 shrink if you want a hard floor.

Privacy

Every property you toggle — direction, wrap, justify, align, gap, and each item's order / grow / shrink / basis / align-self — stays in your browser. The tool is a React island on a static page: no server endpoint, no telemetry on the layouts you build, no analytics on which values you pick. The shareable URL contains only the flex configuration itself, no user identifier or tracking parameter. Build what you need, close the tab, nothing leaves your machine. If you paste the URL in a public channel, anyone with the link can reconstruct the same layout — that's the point of sharing, but it's the only data that ever leaves your device, and only when you actively share it.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

Flexbox Playground & CSS Generator — every flex property, live preview, copy-ready CSS

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How Flexbox Playground & CSS Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Center a single element both horizontally and vertically

Build a navbar with a logo left and links pushed right

Make three cards equal width regardless of content

See exactly what wrap + align-content does before committing

Reorder items visually without touching the HTML source

Common pitfalls

Privacy

FAQ

CSS Grid Visual Generator

CSS Grid Generator

CSS Box Shadow Generator

CSS Media Query Generator

CSS Gradient Generator

CSS Clip-Path Generator

CSS Border Radius Generator

CSS Transform Generator

Color Blindness Simulator

Color Contrast Checker

Color Converter

Color Mixer