How do you use this tool?
- Set container properties — flex-direction, justify-content, align-items, flex-wrap, gap.
- Click an item to edit per-item overrides (order, grow, shrink, basis, align-self).
- Copy the code as plain CSS, Tailwind v4, or Tailwind v3 — three tabs, one click.
What does the Flexbox Playground do?
The playground builds Flexbox layouts visually. Inputs for the six container properties — flex-direction, justify-content, align-items, align-content, flex-wrap, gap — sit on the left, while the live preview on the right shows real flex items reacting to your edits in real time. Click an item to open per-item overrides: order, flex-grow, flex-shrink, flex-basis, align-self.
A container-width slider above the preview adjusts the stage from 240 px up to 1200 px, so you can see in seconds how the same layout behaves in a narrow sidebar versus a wide main area — without resizing the browser window or opening DevTools. That’s the fastest approximation of container queries without writing an actual @container rule.
Why does an overlay draw the axes?
The most common beginner mistake when learning Flexbox is the axis switch. With flex-direction: row the main axis runs horizontally and the cross axis runs vertically. Switch to column and they swap. Suddenly justify-content controls vertical alignment, align-items controls horizontal — and a layout that worked a second ago looks completely different. The axis overlay draws the current main and cross axes directly into the preview, with arrows and labels. You see immediately which property steers which direction.
Most competitor playgrounds skip this overlay. The result is trial-and-error: developers try random justify-content values because they don’t see that the axis switched to vertical after picking column. With axes visible, guesswork becomes intent. A checkbox at the top hides the overlay if it distracts.
How do flex-grow, flex-shrink and flex-basis behave?
These three properties make up the flex shorthand and decide how items distribute or give up space.
| Property | Meaning | Default |
|---|---|---|
flex-grow | How aggressively an item claims surplus space. 0 = not at all, 1 = shares the rest, 2 = twice as much as 1. | 0 |
flex-shrink | How aggressively an item shrinks when space runs out. 0 = never below the basis, 1 = shares the deficit. | 1 |
flex-basis | Ideal size before distribution or removal. auto = content size, 0 = fully controlled by grow. | auto |
A common gotcha: flex-basis: 0 paired with flex-grow: 1 (shorthand flex: 1) distributes container space evenly, but items with long content can still overflow. Reason: items have min-width: auto by default, so they never go smaller than their intrinsic minimum content. Fix: set min-width: 0 on the item. The playground flags this combination automatically.
When to use Flexbox versus CSS Grid?
Flexbox and CSS Grid are complementary, not competing. The rule of thumb: Flexbox for one axis, Grid for two axes.
Flexbox fits:
- Navbars, header toolbars, tab bars
- Equal-height card rows
- Vertical sidebar menus
- Modal contents that need centring
- Sticky footer (container
flex-direction: column, main withflex-grow: 1) - Form layouts with label on the left, input on the right
Grid fits better for:
- Full-page layouts with sidebar, header, main, footer
- Card grids with equal gaps in both directions
- Magazine layouts with spanning regions
- Table-like structures without
<table> - Holy-grail layouts with fixed outer columns
In practice the two combine: Grid for the outer skeleton, Flexbox for inner components. The playground only emits Flexbox code — Grid lives in a sibling tool on the backlog.
How do I write Flexbox as Tailwind utility classes?
Tailwind has used the same Flexbox class names continuously since v3.0 (December 2021) — grow, shrink, and basis-… are identical on v3 and v4. If you see an older codebase with flex-grow, flex-shrink-0, or flex-basis-[120px], those are Tailwind v2 leftovers or a hand-rolled class list — they were never official v3.
| Concept | Tailwind v3 / v4 | Plain CSS |
|---|---|---|
| Grow | grow | flex-grow: 1 |
| Variable grow | grow-[2] | flex-grow: 2 |
| Don’t shrink | shrink-0 | flex-shrink: 0 |
| Variable shrink | shrink-[2] | flex-shrink: 2 |
| Basis value | basis-[120px] | flex-basis: 120px |
| Auto basis | basis-auto | flex-basis: auto |
The playground keeps both tailwind-v3 and tailwind-v4 tabs anyway so migration audits, IDE snippets, and code reviewers can copy output 1:1 into either codebase. The class names are identical between the tabs — the actual v3-to-v4 changes live elsewhere (CSS-first config via @theme, Lightning-CSS engine, renamed gradient utilities like bg-linear-to-* replacing bg-gradient-to-*), not in the Flexbox utilities.
Why does nothing happen sometimes?
Flexbox has a few silent interactions — you change a property and nothing happens. Frequent causes:
align-content without wrap. align-content arranges flex lines along the cross axis. Lines only exist when flex-wrap: wrap or wrap-reverse is active. With nowrap there’s exactly one line — align-content has nothing to arrange. The playground reports this in the warnings panel.
justify-self on an item. That property exists in CSS Grid but NOT in Flexbox. To push a single item along the main axis, use margin-left: auto on the item — the trick shoves the item plus every following sibling to the right (when flex-direction: row). That’s how the classic “logo on the left, menu on the right” pattern works.
flex-basis without flex-grow. Setting flex-basis: 0 theoretically makes every item zero pixels wide — but they don’t expand because flex-grow: 0 is the default. Items collapse to min-content. Fix: also set flex-grow: 1, or use the shorthand flex: 1.
min-width: auto blocks shrinking. Items have min-width: auto by default — they never go smaller than their intrinsic minimum content. With long text or wide images this overflows the container. Fix: min-width: 0 on the item.
Which use cases do the presets cover?
Five real-world layouts, each with one learn tip:
Navbar. Container with flex-direction: row and gap: 16px. The first item (logo) gets flex-grow: 1, pushing everything else to the right. Learn tip: instead of the non-existent justify-self, use margin-left: auto on the last item before the menu group.
Card grid. flex-wrap: wrap plus gap: 16px lets cards wrap as soon as space runs out. Items with flex-basis: 200px and flex-grow: 1 evenly fill each row. Learn tip: set min-width: 0 on cards with long content, otherwise they blow out the layout.
Holy-grail layout. Three-column layout with a fixed left sidebar, fluid main, fixed right sidebar. Outer columns get flex: 0 0 200px, main gets flex: 1 1 auto. Learn tip: when you switch to flex-direction: column for mobile, the axes flip — sidebars become top/bottom, not left/right.
Sticky footer. Container has flex-direction: column and fills at least the viewport height. The main element gets flex-grow: 1, the footer hangs at the bottom automatically. Learn tip: no position: absolute needed — Flexbox handles this robustly and without z-index conflicts.
Centred on both axes. The “hello world” of the Flexbox world. justify-content: center plus align-items: center on the container — that’s it. Learn tip: NO additional property is needed on the centred item. The container handles everything.
Frequently Asked Questions
How does Flexbox work in CSS?
Flexbox is a one-dimensional layout model. A parent with display: flex becomes a flex container; its direct children become flex items that lay out along a main axis. flex-direction picks the main axis, and the cross axis sits perpendicular to it.
What is the difference between Flexbox and CSS Grid?
Flexbox is one-dimensional — items flow either in a row or in a column. CSS Grid is two-dimensional and defines rows AND columns at the same time. Rule of thumb: components with Flexbox, full-page layouts with Grid.
When should you use Flexbox instead of Grid?
Whenever content flows along a single axis: navbars, toolbars, card rows, vertical sidebars, modal contents. As soon as you need to control rows AND columns simultaneously, Grid is the right tool.
How do you centre items vertically and horizontally with Flexbox?
Set display: flex; justify-content: center; align-items: center; on the container. Works for any number of items and without setting an explicit height on the item itself. Caveat: align-items needs a height on the container, otherwise there’s no cross axis to centre against.
How do align-content and flex-wrap interact?
align-content arranges whole flex lines along the cross axis — and lines only exist when wrapping happens. With flex-wrap: nowrap there’s only one line, so align-content has no effect. As soon as flex-wrap: wrap is active, the property controls the spacing between lines.
What do flex-grow, flex-shrink and flex-basis mean?
flex-basis is the ideal size before any space is distributed or removed. flex-grow controls how aggressively an item claims surplus space (0 = not at all, 1 = shares the rest, 2 = twice as much as 1). flex-shrink does the opposite when space runs out. The shorthand flex: 1 1 0 sets all three.
How do Tailwind v4 Flexbox classes differ from v3?
Tailwind v4 dropped the flex- prefix on item utilities: grow, shrink-0, basis-[120px] replace flex-grow, flex-shrink-0, flex-basis-[120px]. Container utilities (flex, flex-col, justify-center, items-center) stay the same. The playground emits both variants side by side.
Does the tool save my layouts?
No. Every setting lives only in the browser tab — no server, no account, no cookies. Reloading the page resets the playground to defaults. To save a layout, copy the output code into your stylesheet.
Which CSS tools are related?
More tools for visual CSS authoring:
- CSS Gradient Generator — linear, radial, and conic gradients with OKLCH and Tailwind v4 output.
- Box-Shadow Generator — multi-layer shadows with Material 3 elevation presets.
- CSS Formatter — beautify raw or minified CSS.
- Contrast Checker — verify WCAG-AAA contrast between two colours.
Last updated: