CSS Flexbox Playground

Experiment with CSS Flexbox properties visually. Adjust container and item properties, see results in real time, and copy the generated CSS. 100% client-side.

Live Preview
Main axis Cross axis
Main
Cross
Container Properties ▼
Items (4) ▼
Selected Item Properties ▼
Click an item in the preview to edit its properties

Layout Presets

Understanding CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that makes it straightforward to distribute space and align content within a container. Unlike traditional layouts using floats or positioning, flexbox handles layout in a single direction (row or column) with powerful alignment and space distribution controls.

Container vs. Item Properties

Flexbox properties are split into two categories: container properties that go on the parent element (display: flex), and item properties that go on the children. Container properties like justify-content and align-items control the overall layout, while item properties like flex-grow and order control individual item behavior.

Main Axis and Cross Axis

Flexbox operates along two axes. The main axis is defined by flex-direction (horizontal for row, vertical for column). The cross axis runs perpendicular to it. justify-content aligns items along the main axis, while align-items aligns them along the cross axis.

The flex Shorthand

The flex property is shorthand for flex-grow, flex-shrink, and flex-basis. For example, flex: 1 0 auto means grow equally, don't shrink, and use auto for the base size. The common flex: 1 is shorthand for flex: 1 1 0%, which makes items share space equally.

Features

Browser Support

CSS Flexbox is supported in all modern browsers. The properties used in this playground work in Chrome, Firefox, Safari, Edge, and Opera without vendor prefixes. Flexbox has had excellent browser support since around 2015 and is safe to use in production.

Related Tools

CSS Grid Generator

Visual CSS Grid layout builder

CSS Gradient Generator

Create beautiful CSS gradients visually

CSS Flexbox Cheat Sheet

Quick reference for all flexbox properties
Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/flexbox-playground" width="100%" height="700" style="border:1px solid #ccc;border-radius:8px;" title="CSS Flexbox Playground"></iframe>

Frequently Asked Questions

What is CSS Flexbox and when should I use it?▼
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model for distributing space and aligning items along a single axis (row or column). Use flexbox when you need to lay out items in a single direction, align items within a container, distribute space between items, or build responsive navigation bars, card rows, and centered content. For two-dimensional layouts (rows and columns simultaneously), CSS Grid is more appropriate.
What is the difference between justify-content and align-items?▼
justify-content controls alignment along the main axis (horizontal by default with flex-direction: row), while align-items controls alignment along the cross axis (vertical by default). If you change flex-direction to column, the axes swap: justify-content controls vertical alignment and align-items controls horizontal alignment.
What do flex-grow, flex-shrink, and flex-basis do?▼
flex-grow defines how much a flex item should grow relative to siblings when there is extra space (0 means don't grow). flex-shrink defines how much an item should shrink when there isn't enough space (1 is the default). flex-basis sets the initial size of an item before growing or shrinking occurs (default is 'auto', which uses the item's content size or explicit width/height).
Keyboard Shortcuts
Ctrl+Enter Run / Format
Ctrl+Shift+C Copy output
Ctrl+L Clear