Developer / CSS layout

Flexbox Playground: Container and Item CSS Controls

Try flex direction, wrapping, justification, alignment and gaps, then adjust each item's grow, shrink, basis, order and alignment. See how the layout changes and copy the CSS.

Flexbox Playground: Container and Item CSS Controls: Shows a live flex container with editable item properties and a short explanation beside each control. The preview has a fixed height to make cross-axis effects visible. Grid layouts with shared rows and columns are available in the CSS Grid generator. Runs 100% locally in your browser with zero server file uploads.

Category: Developer tools
Runs: In your browser
Cost: Free · no sign-up
Availability: Ready to use

Flexbox layout benchLocal processing

Runs entirely in your browser

DirectionSets the main axis and its direction.WrapAllows extra lines when items do not fit.Justify contentDistributes spare space along the main axis.Align itemsAligns items on the cross axis within each line.Align contentDistributes lines on the cross axis when wrapping creates several lines.Gap (px)Sets the space between neighbouring items and lines.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Use flexbox for a row or column. Use CSS Grid when both rows and columns need shared tracks. Open CSS Grid generator

Selected item 1GrowRelative share of positive free space.ShrinkRelative shrinking weight, multiplied by the base size.BasisInitial size along the main axis before growing or shrinking.OrderVisual ordering only; reading and keyboard order stay unchanged.Align selfOverrides the container cross-axis alignment for this item.

Flex layout model

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Free space is distributed using flex growth and shrink weights along the main axis.

Alignment and accessibility

MDN basic concepts of flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . The cross axis is perpendicular to the main axis; visual reordering does not reorder the document.

How to use it

Set the container direction, wrapping and alignment.
Click an item and change its individual sizing and alignment.
Add or remove items, inspect the layout and copy the generated CSS.

Privacy & limitations

Layout settings are processed locally in your browser.

Related tools

Frequently asked questions

Why does align-content sometimes do nothing?

It distributes flex lines. It needs wrapping, multiple lines and spare space on the cross axis to have a visible effect.

Does order change screen-reader order?

No. It changes visual order, while document reading and keyboard order remain unchanged. Keep a logical document order.

When should I use Grid instead?

Use Grid when rows and columns should share tracks. Flexbox is useful when arranging items primarily along one axis.

Free tool · runs in your browser · no account required