CSS Flexbox Playground

The CSS Flexbox Playground is an interactive tool that lets you visually configure all flexbox container and item properties. Changes appear instantly in a live preview, and ready-to-use CSS code is generated automatically so you can copy it straight into your project.

You can configure all six main flex container properties: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around), and gap (pixel value).

Each flex item can be configured with: flex-grow (how much extra space the item takes), flex-shrink (how much the item shrinks when space is tight), flex-basis (the initial size), align-self (individual alignment override), and order (visual order in the container).

You can add up to 6 flex items. Click the '+ Add Item' button to add more items. Each item is color-coded so you can easily identify it in the preview and settings panel.

Click on any numbered tab at the top of the Item Properties panel to select that item. You can also click directly on an item in the live preview to select it. The selected item will be highlighted with a colored border.

Presets are ready-made flexbox configurations for common layout patterns: 'Centered Row' centers items horizontally and vertically, 'Centered Column' stacks items vertically and centers them, 'Space Between' distributes items evenly, 'Wrapping Grid' uses flex-wrap so items wrap to new lines, 'Stretched Items' uses flex-grow so items fill available space, and 'Reversed Row' reverses the item display order. Click a preset to instantly apply it, then customize further.

flex-grow defines how much a flex item grows relative to other items when there is extra space in the container. A value of 0 means the item will not grow. A value of 1 means it takes an equal share of extra space. A value of 2 means it takes twice as much space as an item with flex-grow: 1.

flex-shrink defines how much a flex item shrinks relative to other items when there is not enough space in the container. A value of 0 prevents the item from shrinking. A value of 1 (default) means it shrinks proportionally. A value of 2 means it shrinks twice as fast as an item with flex-shrink: 1.

flex-basis sets the initial main-size of a flex item before free space is distributed. It accepts: 'auto' (uses the item's width or height), a length value like '100px' or '20%', 'content' (based on the item's content), or '0' (item starts from zero size). You can type any valid CSS value into the flex-basis input.

align-items is a container property that applies to all flex items by default. align-self overrides align-items for an individual item. For example, if the container has align-items: center but one item has align-self: flex-end, all items will be centered except that one item which will be at the end of the cross axis.

The order property controls the visual order of flex items without changing the DOM order. Items with a lower order value appear first. The default value is 0. Setting order: -1 on an item will place it before all default items, while order: 1 will place it after all default items.

There are two copy buttons: one for the container CSS and one for all CSS (container + items). Click either 'Copy CSS' button to copy the code to your clipboard. The container CSS includes the .flex-container selector, and the items CSS includes individual .flex-item-1, .flex-item-2, etc. selectors.