Flexbox Playground — Free Online Tool on Toolpile
Every tool you need, one place
PDF, Image, AI, Dev, and Business tools — free, private, no signup.
Toolpile uses cookies for analytics and ads. The tools themselves keep your files in the browser — that doesn't change. Read the full policy
PDF, Image, AI, Dev, and Business tools — free, private, no signup.
About Flexbox Playground
Flexbox is the CSS layout system most developers learn *by accident* — hack at `justify-content` and `align-items` until the thing looks right, then never touch it again. The cost is every new layout takes twice as long as it should. This playground lets you see what each property *actually* does in real time, and the content below covers the three concepts that turn flexbox from voodoo into a tool you reach for deliberately.
Every flex container has a **main axis** and a **cross axis**, and which is which depends on `flex-direction`. With `flex-direction: row` (the default), the main axis runs horizontally and the cross axis runs vertically. With `flex-direction: column`, they swap. Flip this once and half the properties behave the opposite of what you'd expect.
`justify-content` operates on the **main axis** — it's the main-axis spacing control. `align-items` operates on the **cross axis** — it's the cross-axis spacing control. When you switch to `column` direction, `justify-content` becomes vertical and `align-items` becomes horizontal. This is why your `justify-content: center` stops centring things horizontally when you change direction — it's still centring along the main axis, which is now vertical.
Mnemonic that sticks: **J goes with flex-direction; A is always perpendicular**. If you remember which axis is the main one, everything else follows.
The playground's Direction dropdown flips this live — watch the same `justify-content` value look completely different as you switch row ↔ column. Five minutes playing with this one dropdown saves hours of stack-overflow scrolling later.
**flex-basis** is the size a flex item *wants* to be before free space is distributed. `flex-basis: auto` uses the item's content size; `flex-basis: 200px` is a preferred starting width (on row) or height (on column). It's the same idea as `width`/`height` but scoped to the flex pipeline.
**flex-grow** controls how leftover space is handed out. `0` means "don't grow". `1` means "take a share of leftover space". `2` means "take twice the share your neighbours with grow:1 get". Leftover space = container size minus the sum of all items' basis values.
**flex-shrink** controls what happens when there isn't enough room — each item with `shrink > 0` gives up some of its basis proportionally. `flex-shrink: 0` is the famous hack to pin an item (a sidebar, an icon) at its declared size no matter how cramped the container gets.
The shorthand `flex: 1` expands to `flex: 1 1 0%` — grow 1, shrink 1, basis 0%. That last one surprises people: with a basis of 0, every item starts at nothing and then grows into the leftover (which is now the *entire* container). Result: three items with `flex: 1` each take exactly a third of the width regardless of their content. That's the equal-columns pattern every CSS tutorial shows — now you know why it works.
The one-sentence rule: **flexbox is 1D; grid is 2D**. If you're arranging items along one axis (a nav bar, a toolbar, a list of cards that wraps into rows), flexbox is the right tool. If you're building a layout that needs alignment across BOTH rows and columns simultaneously (a dashboard, a form with labels aligned left and inputs aligned right, a holy-grail page layout), grid is usually cleaner.
That said, the real-world answer in 2026 is **use both**. A common pattern: grid for the page-level template (header / sidebar / main / footer regions), flexbox inside each region for the content flow. Fighting grid into 1D-layout contortions or flex into 2D-alignment is where ugly CSS comes from.
One concrete warning: if you find yourself using `flex-wrap: wrap` with carefully-calculated percentage widths to force a grid, switch to `display: grid` with `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`. One line of grid replaces ~8 lines of flex wrapping + width math + gap compensation.
Why doesn't align-items work when there's only one row?
It does — but 'stretch' (the default) fills the cross axis with each item, so the effect isn't visible unless the items have different heights. Give items different heights or explicitly set `align-items: flex-start` to see them snap to the top. This is usually the first confusion every flexbox learner hits.
What's the difference between align-items and align-content?
align-items aligns each flex item along the cross axis WITHIN its line. align-content aligns the LINES themselves when there are multiple wrapped lines. If you only have one row (no wrap), align-content does nothing visible. The playground lets you set flex-wrap: wrap, add enough children to force a second line, and watch align-content take effect.
Why is my flex child overflowing its container?
Usually because of `min-width: auto` (the default on flex children). Long text or child content with a larger intrinsic size expands the item and overflows. Fix with `min-width: 0` on the child — this releases the implicit min-width and lets flex-shrink actually shrink the item down to fit. This is the most common gotcha in real-world flex layouts.
Does gap work in Safari?
Yes since Safari 14.1 (April 2021). Older Safari needs a margin-based workaround (`margin-right` on every child except last), but anyone on a 2022-or-newer iOS has native gap support. In 2026, treat gap as universally supported; skip polyfills.
How do I center one item horizontally AND vertically?
The canonical pattern: `display: flex; justify-content: center; align-items: center;` on the container. With flex-direction: row (default), justify-content centers horizontally and align-items centers vertically. That's the three-line 'center a div' solution that entire Stack Overflow threads are about.
What's flex: 1 vs flex: auto vs flex: none?
`flex: 1` is `1 1 0%` — item takes equal share of container (basis 0 means 'your initial size is nothing'). `flex: auto` is `1 1 auto` — item takes its content size first, then grows/shrinks if needed. `flex: none` is `0 0 auto` — item uses its content size and won't grow or shrink. `flex: 1` is right for equal-column layouts; `flex: auto` is right when you want items sized to content but flexible; `flex: none` pins the item.
When should I use order?
Rarely. `order` changes visual order without changing source order, which is great for responsive layouts (move the sidebar below content on mobile by bumping its order) but bad for accessibility — screen readers and keyboard focus follow source order, not visual order. If order > 0 is creating a mismatch between what a sighted user sees and what a screen-reader user hears, refactor.
Why does this playground show real CSS, not Tailwind?
Because CSS is universal — every framework (Tailwind, CSS-in-JS, vanilla) maps to the same underlying properties. Seeing the real CSS first makes you fluent; from there, `justify-content: center` → `justify-center` in Tailwind is a trivial lookup. The inverse (learning Tailwind utilities without the CSS) leaves you stuck the moment you leave Tailwind's world.