CSS Flexbox Playground

Features

• A row of buttons for each of seven properties: display, flex-direction, flex-wrap, justify-content, align-items, align-content and item sizing
• A live preview on a grid, so positional effects are easy to judge
• Item count (1–8) and gap (0–64px) are adjustable
• “Why nothing changed”: judged from the current settings (align-content needs multiple lines, space-* needs free space, baseline needs differing baselines, fixed width with nowrap overflows)
• Reverse directions warn that they change visual order only — Tab and screen readers still follow the DOM
• Each selected value shows a one-line explanation under its row
• Copies the complete two-block CSS (container plus items) and the matching HTML
• Preview and code come from a single set of declarations, so what you see is what you copy

How to use

1. Click through the button rows and watch the preview change
2. Adjust the item count and gap to match your own case
3. Check whether a “why nothing changed” note appears below the preview
4. Copy the CSS and HTML into your page

FAQ

Which axis does justify-content control, and which does align-items?

`justify-content` works along the main axis; `align-items` works along the cross axis. The main axis comes from `flex-direction`: with `row` it is horizontal (justify moves items left/right, align moves them up/down), and with `column` the main axis turns vertical, swapping the two roles. So the answer to “how do I centre something both ways” depends on direction — under the default `row` it is `justify-content: center` with `align-items: center`, and under `column` the same two declarations mean the opposite. Click the direction row and you can watch the swap happen.

Why does align-content do nothing?

Because it distributes the lines, and with a single line there is nothing to distribute — it only applies once `flex-wrap: wrap` has actually produced multiple lines. While the wrap mode is `nowrap` the tool leaves it out of the generated code (including it would be misleading) and explains why below the preview. To see it: set wrap to `wrap`, choose fixed-width items, and raise the item count past six.

Why does space-between look the same as flex-start?

Because the `space-*` values distribute free space, and with no free space they all collapse into the same layout. The usual cause is items filling the container — either through equal or fixed-width sizing, or because the container is only just wide enough. Switch item sizing to Content, use fewer items, or make the container wider and the difference appears.

What is the difference between flex: 1 and flex: 1 1 auto?

`flex: 1` is shorthand that expands to `flex: 1 1 0%` (basis zero), while `flex: 1 1 auto` uses the content width as the basis. The difference shows when contents differ in length: with basis 0 the items split the container evenly regardless of content, whereas with basis auto they first take their content width and then share the leftover proportionally, so the longer one ends up wider. That is exactly the Equal versus Content choice here — click between them and watch items 1 and 2.