Flexbox Playground

Flexbox Playground is an interactive visualizer for all CSS Flexbox properties. Every change you make to a property updates the live preview immediately — no page reloads, no guessing. The colored items in the preview ARE real browser-rendered flex items.

The left panel controls the flex container: flex-direction, flex-wrap, justify-content, align-items, align-content, and gap. The container height can be adjusted with the slider above the preview to see how align-items: stretch and align-content behave with different container heights.

Click any item in the preview to select it. The left panel then shows per-item properties: flex-grow, flex-shrink, flex-basis, align-self, and order. Enable custom width/height overrides for the selected item to see how flex-basis and explicit sizes interact. Add up to 8 items or remove the selected one with the toolbar buttons.

• Container properties — click any property value button on the left. The preview updates instantly. Try switching flex-direction between row and column and watch items reflow.
• align-content — only has a visual effect when flex-wrap is set to wrap or wrap-reverse. Set wrap, add several items to cause wrapping, then experiment with align-content.
• Gap — controls space between items. Column gap is the space between items along the main axis; row gap is the space between wrapped rows/columns.
• Container height — drag the H slider in the toolbar to resize the flex container. Taller containers make align-items and align-self effects more visible.
• Adding & removing items — use the Add / Remove toolbar buttons. Remove deletes the currently selected item.
• Per-item properties — click any item to select it (checkmark appears). flex-grow allows an item to grow into available space; flex-shrink controls how much it shrinks; flex-basis sets its initial main-axis size. order changes visual position without changing DOM order.
• Custom width/height — toggle on to add an explicit dimension. Note: if align-items/align-self is stretch, setting an explicit height (in row direction) overrides stretch.
• Click Copy CSS to copy the container CSS plus the selected item's CSS (if any selected).

Container properties — applied to the element with display: flex:

• flex-direction — defines the main axis. row: left→right. column: top→bottom. -reverse variants flip the direction.
• flex-wrap — nowrap: items stay on one line (may overflow). wrap: items wrap to new lines. wrap-reverse: wraps in reverse cross-axis direction.
• justify-content — distributes items along the main axis. space-between: equal gaps between; space-around: half-gaps at edges; space-evenly: equal gaps everywhere.
• align-items — aligns items on the cross axis within a single line. stretch: items fill the container's cross dimension (default).
• align-content — aligns the lines on the cross axis when flex-wrap causes multiple lines. Has no effect with a single line.
• gap — shorthand for row-gap (between lines) and column-gap (between items on a line).

Item properties — applied to direct children of the flex container:

• flex-grow — factor controlling how much extra space an item takes relative to siblings. 0: don't grow. 1: grow proportionally. 2: grow twice as much as grow-1 items.
• flex-shrink — factor controlling how much an item shrinks when there isn't enough space. 0: never shrink. 1: shrink proportionally (default). Higher = shrinks more.
• flex-basis — the item's starting main-axis size before grow/shrink is applied. auto: use the item's width/height. 0: start from zero (grow fills all space proportionally).
• align-self — overrides align-items for a single item. Useful for making one item not stretch when others do.
• order — changes visual order without affecting DOM order. Default 0. Negative values appear first; higher values appear last.

The flex shorthand — flex: grow shrink basis — is what the CSS output uses. flex: 1 is equivalent to flex: 1 1 0; flex: auto is flex: 1 1 auto.