Flexbox Playground

About this tool

Flexbox is the go-to layout system for aligning items along a single axis, but the interaction between flex-direction, justify-content and align-items is notoriously confusing until you see it visually. The Flexbox Playground gives you a live container with three to five numbered children and dropdowns for the main container properties: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (six values) and align-items (five values), plus a Gap field in pixels. Change any value and watch the items rearrange in real time. An optional equal flex-grow demo gives every child flex: 1 1 0 so you can see how items share the free space. The output is a .flex rule with display: flex and every chosen value, plus a .flex > * rule when the grow demo is on — useful for learning and for starting real layout code.

Why use it

• Core Properties: flex-direction, flex-wrap, justify-content and align-items are dropdowns that apply instantly to the preview, so you can compare values without memorizing keyword lists.

• Live Items: The preview holds three to five numbered children — enough to see how values like space-between, space-around and space-evenly distribute them.

• Equal-Grow Demo: One checkbox gives every child flex: 1 1 0 and adds a .flex > * rule to the output, showing how items share the available space equally.

• Gap Control: A single Gap field in pixels sets the spacing between items without margins, and the preview updates as you type.

• Copy Full Rule: The export is a .flex rule with display: flex plus all five chosen values written out explicitly, so the copied CSS documents every setting you tested.

How to use

1. Choose a Direction: row, row-reverse, column, or column-reverse
2. Choose a justify-content value to control spacing along the main axis
3. Set align-items to position children on the cross axis
4. Choose a Wrap value and set the Gap in pixels
5. Set Children to 3, 4 or 5 and optionally tick "Include equal flex-grow demo"
6. Click Copy CSS to export the .flex rule (and the child rule when the grow demo is on)

When it helps

• When centering a card or modal both horizontally and vertically and the exact property combination is not immediately obvious
• When building a header with logo on the left and navigation on the right using space-between alignment
• When checking how flex-wrap and gap behave before building a wrapping row of tags or cards
• When debugging a layout where items are not aligning as expected and want to isolate which property controls the behavior
• When teaching or learning flexbox and need a visual sandbox to connect property values to rendered behavior
• When comparing justify-content values for a toolbar or button row

Examples

Direction: row, Wrap: nowrap, justify-content: center, align-items: center, Gap: 16

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

Direction: row, Wrap: nowrap, justify-content: space-between, align-items: center, Gap: 10

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

Direction: row, Wrap: wrap, justify-content: flex-start, align-items: stretch, Gap: 24, equal flex-grow demo on

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
}

.flex > * {
  flex: 1 1 0;
}

Tips

• justify-content controls the main axis and align-items controls the cross axis — remember this pair and the axis they act on always flips together with flex-direction
• flex: 1 is the cleanest shorthand for equal-share growth — it expands to flex: 1 1 0, starting all items at zero basis and growing proportionally
• Prefer gap over margins for flex item spacing — gap respects wrap boundaries and does not add space at container edges
• flex-wrap: wrap combined with flex: 1 1 280px creates a responsive card grid that adapts without any media queries
• Flexbox is intentionally one-dimensional — if you find yourself fighting it for two-dimensional alignment, switch to CSS grid

Frequently Asked Questions

Glossary

Flex Container

An element with display: flex or display: inline-flex. Establishes a flex formatting context for its direct children and exposes all flex container properties.

Flex Item

A direct child of a flex container. Flex items participate in the flex layout algorithm and respond to flex-grow, flex-shrink, and flex-basis properties.

Main Axis

The primary axis of a flex container along which flex items are placed. Runs horizontally in flex-direction: row and vertically in flex-direction: column.

Cross Axis

The axis perpendicular to the main axis in a flex container. align-items and align-self control item placement on this axis.

Justify Content

A flex container property that distributes space between and around items along the main axis. Common values: flex-start, center, flex-end, space-between, space-around, space-evenly.

Align Items

A flex container property that controls how items are aligned on the cross axis within a single row or column. Common values: stretch (default), center, flex-start, flex-end, baseline.