Flexbox Playground

Overview

An interactive sandbox for the flex container properties. Four dropdowns control flex-direction, justify-content, align-items and flex-wrap, a slider sets the gap from 0 to 40 pixels, and another adds up to eight items of deliberately different heights so cross-axis behaviour is visible. The container renders live and the panel below copies the complete .container rule.

How It Works

Pick a value for each of the four container properties from their dropdowns. Drag the gap slider to space the items and the items slider to change how many boxes participate, from one to eight. The items are fixed-width boxes with alternating heights, which makes baseline and stretch alignment obvious. The generated CSS appears in a pre block that always reflects the current state, and the Copy CSS button puts the whole .container declaration on your clipboard.

Step-by-Step Usage Guide

1. Choose flex-direction and flex-wrap for the container.
2. Set justify-content and align-items to distribute and align the items.
3. Adjust the gap slider and the item count.
4. Copy the generated .container rule.

Technical Specifications & Standards

The main axis follows flex-direction, so justify-content distributes along it while align-items works on the cross axis; switching from row to column swaps their visual roles, which is the single most common source of flexbox confusion. align-items: stretch only grows items whose cross size is auto, and the playground items have fixed heights precisely so you can watch stretch do nothing and compare it against flex-start. The gap property on flex containers arrived later than on grid: Chrome added it in 84, Safari in 14.1 and Firefox in 63, so it is safe today but worth remembering for legacy support. With flex-wrap: nowrap the items compress instead of wrapping, which demonstrates why min-width: 0 matters for text children.

Targeted Use Cases

• Toolbars and nav bars that need centered or spaced-apart items.
• Card rows that must wrap onto new lines with consistent gutters.
• Centering a single element both horizontally and vertically in two declarations.
• Teaching or documenting how each container property changes distribution.

Notes & Gotchas

• Prefer gap over margins between flex items; it never adds space at the container edges.
• Use column direction for vertical stacks instead of rewriting justify-content for the cross axis.
• Check wrapped layouts at narrow widths, because wrap changes how justify-content: space-between behaves on the last line.
• Give text children min-width: 0 when they must truncate inside a flex row.

Frequently Asked Questions