What is the difference between justify-content and align-items?

justify-content controls how flex items are distributed along the main axis (horizontal by default). align-items controls positioning on the cross axis (vertical by default). When you switch to flex-direction: column, the axes swap — justify-content becomes vertical and align-items becomes horizontal. Toggle flex-direction in the playground to see both values change effect simultaneously.

When should I use flex-grow versus flex-basis?

flex-basis sets the starting size of an item before any remaining space is distributed. flex-grow controls how much of that remaining space the item claims. Set flex-basis: 200px and flex-grow: 1 to give an item a minimum of 200 px but let it expand to fill available width. Items with flex-grow: 2 receive twice as much extra space as items with flex-grow: 1.

What does flex-shrink do and when does it activate?

flex-shrink determines how much an item contracts when the flex container is smaller than the combined item sizes. It only activates under flex-wrap: nowrap (the default) when items overflow. An item with flex-shrink: 2 shrinks twice as fast as one with flex-shrink: 1. Set flex-shrink: 0 to prevent an item from shrinking at all — useful for fixed-size sidebars or icons.

What is the difference between align-items and align-self?

align-items is a container property that sets the default cross-axis alignment for all items at once. align-self overrides that default for a single item. Select any box in the playground and change its align-self to center while the container uses align-items: flex-start — only that one item centres itself.

What does align-content do and when is it visible?

align-content only has an effect when there are multiple flex lines, meaning flex-wrap must be wrap or wrap-reverse and the items must actually wrap. It controls how those lines are distributed on the cross axis. If all items fit on one line, align-content has no visible effect.

Learning Flexbox from scratch

New to Flexbox? Start with flex-direction: row, add 3-4 items, then try each justify-content value in turn. The live preview makes the difference between space-between and space-around immediately obvious without needing to read documentation or open DevTools. Click an item to edit its flex-grow and watch how it expands to fill available space.

Debugging a sticky layout problem

Paste your broken layout's container and item dimensions into the playground. Isolate the container properties from the item properties until you reproduce the glitch, then experiment until it fixes itself. The generated CSS is immediately copy-pasteable back into your stylesheet, so you can go from "something is wrong" to a working fix in under a minute.

Generating a flex snippet for a component

Configure the exact flex container and item mix your nav bar, card grid, or toolbar needs, then copy the CSS. The output covers both the .container class and every .item-N override class so you get a complete, working starting point in seconds rather than looking up property names.

CSS Flexbox Playground — visual flex container and item properties with live CSS output

Visual CSS Flexbox sandbox — tweak container and item properties live, see the layout update instantly, copy ready-to-use CSS.

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Container Properties

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

Note: align-content only affects wrapping containers. Enable flex-wrap to see it.

Preview

Item Properties

Click an item in the preview to edit its properties.

Generated CSS

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

What this tool does

A fully interactive visual sandbox for mastering CSS Flexbox. Adjust every container property — flex-direction, flex-wrap, justify-content, align-items, and align-content — and watch the layout update in real time. Add up to 8 flex items and configure each individually with flex-grow, flex-shrink, flex-basis, align-self, and order. The generated CSS panel always reflects the current state as valid, copy-ready code. 100% client-side.

Tool details

Input: Text + Numbers + Structured content; 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 <= 22 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; 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 CSS Flexbox Playground fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

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

Real-world use cases

Learning Flexbox from scratch
New to Flexbox? Start with flex-direction: row, add 3-4 items, then try each justify-content value in turn. The live preview makes the difference between space-between and space-around immediately obvious without needing to read documentation or open DevTools. Click an item to edit its flex-grow and watch how it expands to fill available space.
Debugging a sticky layout problem
Paste your broken layout's container and item dimensions into the playground. Isolate the container properties from the item properties until you reproduce the glitch, then experiment until it fixes itself. The generated CSS is immediately copy-pasteable back into your stylesheet, so you can go from "something is wrong" to a working fix in under a minute.
Generating a flex snippet for a component
Configure the exact flex container and item mix your nav bar, card grid, or toolbar needs, then copy the CSS. The output covers both the .container class and every .item-N override class so you get a complete, working starting point in seconds rather than looking up property names.

Common pitfalls

Forgetting that align-content only works with wrapping flex containers (flex-wrap: wrap). Setting it on a single-line layout does nothing — enable wrap first, then add enough items to force wrapping.
Confusing flex-basis: auto (use the item's own width) with flex-basis: 0 (ignore own width and distribute all space via flex-grow). The shorthand flex: 1 expands to flex: 1 1 0 with basis 0.
Setting flex-shrink: 0 on every item and then wondering why they overflow. At least one item needs flex-shrink >= 1 for a nowrap row to fit inside its parent container.

Privacy

All layout calculations happen in your browser. Nothing is uploaded to any server. No cookies, no analytics on the tool itself.

FAQ

Tool combos

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

Browse all tools for this role

CSS Flexbox Playground — visual flex container and item properties with live CSS output

Container Properties

Preview

Item Properties

Generated CSS

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Flexbox Playground fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Learning Flexbox from scratch

Debugging a sticky layout problem

Generating a flex snippet for a component

Common pitfalls

Privacy

FAQ

CSS Grid Generator

CSS Grid Visual Generator

CSS Button Generator

CSS Filter Generator

CSS Formatter & Minifier

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

App Store Keywords Checklist

ASCII Table Generator

ASCII Table Reference