CSS Flexbox Playground

About Flexbox Playground

Flexbox laid out as the two questions it actually is: which way does the main axis run, and what happens to the space that is left over. Every property here answers one of those, and the preview redraws with exactly the CSS shown below it.

justify-content and align-items are not a horizontal pair and a vertical pair — that is the single misunderstanding behind most of the time lost to flexbox. justify-content works along the main axis and align-items across it, so switching flex-direction to column swaps which of them moves things up and down. Set the direction to column here and watch the two controls trade jobs; after that the property names stop being arbitrary.

align-content is the third one, and it does nothing at all until the items wrap. It distributes the *lines*, not the items, so on a single line there is nothing for it to distribute — a fact that has cost more debugging time than it should, because the property is accepted, inherited and silently ignored.

Turn on uneven items before judging any of it. With every box the same size, stretch, center and flex-start produce identical output, and the controls look broken when they are working perfectly.

Where it helps

• The preview is drawn with the exact CSS shown underneath it, so there is nothing to translate between what you see and what you paste.
• Uneven items are the default, which is the only way align-items shows what it does.
• Says in words which axis is which for the direction you chose, so the property names stop being guesswork.
• Points out when align-content is being ignored, instead of leaving you to wonder why the control does nothing.
• Covers the container properties, which is where the confusion lives — the item properties are a separate and simpler question.
• Runs entirely in your browser.

Limits

• Container properties only. flex-grow, flex-shrink, flex-basis, align-self and order belong to the items and are not set individually here.
• The preview items are plain boxes, so anything that depends on real content — a baseline, an intrinsic minimum width, a long unbroken word — will not show up.
• align-items: baseline needs text at different sizes to be visible, and boxes of colour have no baseline to align.
• It cannot tell you whether flexbox is the right tool. A two-dimensional layout is a grid, and forcing it into nested flex containers is how a layout becomes unmaintainable.
• Older flexbox bugs — the ones people still find in IE11 and Safari 10 — are not reproduced, because the browser you are using does not have them.

Frequently asked questions

Why does align-items: center do nothing?

Almost always because every item is the same height as the container, so there is nowhere for it to move to. Turn on uneven items here and it becomes obvious. The other common cause is a container with no height of its own: centring inside a box that is exactly as tall as its content is centring in zero space.

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

align-items positions each item within its line; align-content positions the lines within the container. With flex-wrap: nowrap there is only ever one line, so align-content is ignored entirely — which is why it so often appears to be broken.

When should I use grid instead?

When the layout is two-dimensional. Flexbox lays things out along one axis and lets them wrap; grid places them into rows *and* columns that are defined in advance. A card that needs its rows to line up across columns is a grid, and building it with nested flex containers means maintaining the alignment by hand.

Does gap work in flexbox everywhere?

Yes, in every current browser. It landed in Safari in 2020, which is late enough that a codebase supporting old iOS versions may still be using margins and negative-margin containers — but nothing shipping today needs that workaround.

Related tools

• CSS Grid Playground — Build a grid template and see the tracks it makes
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
• CSS Formatter — Format stylesheets with consistent indentation
• HTML Formatter — Indent and tidy HTML markup
• JavaScript Formatter — Re-indent JavaScript and TypeScript source

More Web Development tools

• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation
• JavaScript Formatter — Re-indent JavaScript and TypeScript source
• SCSS/SASS Formatter — Format SCSS syntax and nested rules
• TypeScript Formatter — Format TypeScript source code
• SQL Formatter — Format SQL statements with dialect selection
• SQL Minifier — Collapse formatted SQL into compact text
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Query String Parser and Builder — Convert query strings into editable key-value data
• CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
• CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
• cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
• Minifier — Shrink CSS, HTML or JavaScript
• CSS Grid Playground — Build a grid template and see the tracks it makes
• Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
• SVG Path Viewer — Draw path data and read back what it contains
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
• Regex Tester — Test patterns, inspect groups and preview replacements
• User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
• HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
• HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
• Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
• Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework