CSS Flexbox Playground

Experiment with Flexbox properties visually and copy the generated CSS code.

How to Use CSS Flexbox Playground

1

Set container properties

Adjust flex-direction, justify-content, align-items, and wrap.
2

Configure flex items

Set flex-grow, flex-shrink, and flex-basis on individual items.
3

See live preview

Watch the layout update in real time as you change values.
4

Copy the CSS

Click copy to grab the flexbox CSS for your stylesheet.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Flexbox Playground does and how it behaves

When a row or column of elements will not align as expected, the CSS Flexbox Playground provides a visual test area for changing Flexbox properties and seeing their effects together. It also presents the resulting CSS for copying into a stylesheet. The key distinction is axis-dependent behavior: justify-content acts along the main axis, while align-items acts along the cross axis. Changing flex-direction can therefore make an alignment control appear to switch from horizontal movement to vertical movement.

How the result is produced

Configure the container

Choose values for the flex container, including direction, wrapping, main-axis distribution, cross-axis alignment, and spacing. The preview lets you compare the same contents under different property combinations. Interpret the result relative to flex-direction: row follows the inline axis, while column follows the block axis, with their reverse variants changing the item order along that axis.

Copy the container CSS

Once the preview has the intended arrangement, copy the generated CSS as a starting point for the project. Apply those declarations to the element that should become the flex container, not indiscriminately to every child. Individual flex items may still need their own flex, order, align-self, sizing, or minimum-size declarations.

Good uses

Testing whether a toolbar should use a row, reversed row, column, or reversed column before editing a component stylesheet.
Comparing Flexbox distribution choices for navigation items when the effect of available free space is difficult to judge from code alone.
Checking how wrapping, alignment, and gaps interact for a group of cards, then copying the resulting container CSS into a prototype.

Limits and checks

A successful preview does not guarantee the same result inside a differently sized production container or with longer real content.
justify-content is not synonymous with horizontal alignment; its physical direction changes when the selected main axis changes.
Generated container declarations do not capture every possible item-level requirement, such as custom order, growth, shrinkage, basis, or self-alignment.

Common questions

Why does justify-content move items vertically after I change the direction?

justify-content follows the main axis rather than a permanently horizontal axis. With flex-direction set to row, the main axis follows the inline direction. With column, it follows the block direction, which is vertical in common horizontal writing modes. Cross-axis positioning is handled by properties such as align-items.

Will the copied CSS reproduce the preview exactly in my application?

No, not necessarily. The final layout also depends on the real container dimensions, intrinsic content sizes, minimum sizes, wrapping opportunities, writing mode, and other applicable CSS declarations. Use the generated code as the flex container configuration, then test it with the actual child elements across the widths your interface must support.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.