Skip to main content

Flexbox Playground

Build CSS flexbox layouts visually with live preview and copy-ready CSS output.

Reviewed by · Last reviewed

Container

8px

Items (3)

Preview

1
2
3
CSS
.container {
  display: flex;
  gap: 8px;
}

How to Use the Flexbox Playground

  1. Set the container axis via the flex-direction dropdown. Row lays items left to right on the main axis, column stacks them vertically, the -reverse variants flip the order.
  2. Distribute space along the main axis with justify-content: flex-start, center, space-between, space-around, space-evenly.
  3. Align along the cross axis with align-items. Baseline alignment is the one developers underuse - it locks text baselines across items of different heights.
  4. Decide wrap behavior with flex-wrap and set the gap value. Use + Add Item to add up to 10 children and tweak each one\'s flex-grow, flex-shrink, flex-basis, align-self, and order.
  5. Click Copy CSS to grab the full container rule and only the overridden item rules (the tool omits defaults to keep output clean).

What the Layout Engine Is Doing

CSS Flexible Box Layout Module Level 1 (W3C Candidate Recommendation 2018, broadly stable in every shipping browser since 2017) defines a two-pass algorithm. In pass one the engine collects the items, measures their hypothetical flex-basis, and computes the positive or negative free space left in the container. In pass two it distributes that free space according to each item\'s flex-grow (share of positive free space) or flex-shrink (weighted shrink when items overflow), then positions the resulting boxes along the main axis with the chosen justify-content rule and stretches them across the cross axis with align-items. The playground writes these values directly into inline styles on a live preview div, with no framework intermediation, so what you see is exactly what a browser would do with the same CSS in your own project.

When to Reach for Flexbox

  • One-dimensional layouts: a row of nav links, a column of form fields, a toolbar of buttons. If the layout is "a line of things", Flexbox is the default.
  • Centering a single child vertically and horizontally with display: flex; place-items: center. The decade-long centering problem is solved in one declaration.
  • Distributing a known number of items with unknown widths across a known container width (navigation bars, tag chips).
  • Pushing a footer action to the right of its parent using margin-left: auto on the pushed child.
  • Baseline-aligning heterogeneous content, for example a product card title and a smaller price next to it so their letterforms share a visual line.

Common Traps

The flex shorthand is the first. flex: 1 expands to flex: 1 1 0%, which sets basis to zero and can collapse intrinsic widths unexpectedly; use flex: 1 1 auto when you want "grow to fill but respect content size". Second, min-width: auto: flex items have an implicit minimum equal to their content\'s min-content, so a flex: 1 child containing a long unbreakable URL blows out the layout - set min-width: 0 on the child. Third, baseline alignment with images: an inline-block image\'s baseline is its box bottom, which misaligns against text baselines; wrap it or switch to align-items: center. Fourth, order and accessibility: tab order follows DOM order, not visual order, so reordering items with order breaks keyboard navigation. Fifth, gap percentages inside flex containers always resolve to pixels regardless of syntax.

Where Flexbox Lives in the Spec Landscape

The CSS layout story is now four major systems: Flexbox (Level 1, one-dimensional), Grid (CSS Grid Layout Level 1, two-dimensional with explicit tracks), Multi-column (legacy, for newspaper-style flowing text), and the new Container Queries + Subgrid layer added in CSS Grid Layout Level 2 and CSS Containment Module Level 3. Flexbox and Grid overlap in practice: Grid can do one-dimensional layouts with grid-auto-flow: column, Flexbox can do pseudo-two-dimensional with wrap plus aligned rows. The honest rule is that Flexbox excels when you want content-driven sizing and do not care about aligning items across lines, while Grid excels when you want explicit track sizes and row-and-column alignment. The playground targets the Flexbox sweet spot: components and small layout primitives rather than whole-page grids.

Comparison to Grid, Frameworks, and Hand-Coding

A utility framework like Tailwind can shortcut most of this by chaining classes (flex items-center justify-between gap-4) - for live-editing those utilities end-to-end see the dedicated Tailwind playground. Chrome DevTools has had a first-class Flexbox inspector since 2020 that lets you tweak the same properties live on any page, which is arguably a better tool for debugging an existing layout than building one. The playground wins when you want to design a layout without a real page around it or to learn the property interactions by isolating them. For pure learning, the classic Flexbox Froggy and Flexbox Defense games teach the named values through puzzles rather than property editors - different pedagogy, same vocabulary.

Frequently Asked Questions

When should I use Flexbox versus Grid?

Reach for Flexbox when your layout is a single row or column of items whose sizes you want driven by their content. Reach for Grid when you need to align things across two axes at once, or when you want explicit track sizes that some items span and others do not. A common pattern is Grid for the page shell (header, sidebar, main, footer) and Flexbox inside each region for the smaller component-level layouts.

Why does flex: 1 sometimes collapse my content?

Because <code>flex: 1</code> expands to <code>flex: 1 1 0%</code> - basis zero before growing. For items with intrinsic content use <code>flex: 1 1 auto</code> to start from the measured size. If the child still collapses, add <code>min-width: 0</code> to defeat the default min-width: auto rule.

What does align-items: baseline actually align against?

The first-baseline of each flex item. For text that is the letterforms' baseline; for items with a non-text first child (image, block element) the baseline falls back to the item's bottom edge, which is why a baseline row with mixed text and icons looks misaligned. Wrap such elements or switch to <code>align-items: center</code>.

Why is my gap value ignored?

Most likely the browser is one of the few that still do not support <code>gap</code> in Flexbox containers - gap was added to Flexbox later than to Grid, and Safari shipped it only in version 14.1. If you need older-Safari support, fall back to negative margins on the container and positive margins on items, but for any browser from 2021 onward gap works fine.

Does order break keyboard accessibility?

Yes, in a subtle way. Tab order always follows DOM order, so if you use <code>order: -1</code> to visually move an action button to the front of a flex row, a keyboard user will tab to it in its original DOM position, which will feel random to them. The accessible fix is to reorder the DOM, not the CSS. Reserve <code>order</code> for cases where the visual swap is cosmetic (for example, reversing a card pair on mobile) and the underlying reading order still works both ways.

Can I use Flexbox for whole-page layout?

Technically yes, practically Grid is usually the better fit for two-dimensional page shells. Flexbox for page layout requires nested containers (a row containing two columns, each of which is itself a column Flex container), which works but obscures the intent. Grid expresses "header, sidebar, main, footer" in a single template in the parent, which your future self will thank you for when you come back in six months.

Why does flex-wrap create equal-height items per row?

Each wrapped row is its own cross-axis context, and items default to stretching to the tallest one in that row. Set <code>align-items: flex-start</code> on the container to opt out, or use Grid if you want per-item sizing.

What is the difference between space-around and space-evenly?

Both distribute items with equal space between them, but they treat the edges differently. <code>space-around</code> gives each item a half-size gap before and after, so the outer gaps are half the size of the inner gaps. <code>space-evenly</code> gives every gap - including the two at the ends - exactly the same size. For a row of three items in a 600px container with 300px of free space, space-around distributes it as 50, 100, 100, 50 and space-evenly as 75, 75, 75, 75.

Does this tool require JavaScript at runtime in production?

No. The playground itself uses JavaScript to update the live preview as you drag controls, but the CSS you copy out is pure declarative Flexbox and runs with zero runtime cost in the consuming page. Your production site can be fully JavaScript-disabled and the exported CSS will behave identically to what you saw in the playground.

How does Flexbox relate to WCAG?

Flexbox itself has no direct accessibility implications - it is a paint-level layout engine, and assistive technology walks the DOM. The indirect concerns are SC 1.3.2 (Meaningful Sequence), which requires visual order to match reading order, and SC 2.4.3 (Focus Order), which requires keyboard focus to proceed in a sequence that preserves meaning. Both are violated when you use <code>order</code> or <code>flex-direction: row-reverse</code> to make visual-order-not-equal-DOM-order layouts without considering the user who navigates by tab.

Is any of my playground input saved?

The live state is held in Preact hooks on your device. The playground does not persist to localStorage and does not beacon the configuration to a server. If you refresh the page you lose your current layout, so copy the CSS as soon as you are happy with it.

More CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool