CSS Flexbox Playground

How to use this tool

Toggle flex properties using the controls.
Watch the live preview update.
Copy the generated CSS for your project.

The flexbox mental model

A flex container has a main axis and a cross axis. By default the main axis runs left to right (row direction). Items are placed along the main axis; the cross axis is perpendicular. Setting flex-direction: column flips both axes: the main axis now runs top to bottom, and the cross axis runs left to right. Understanding axis direction is the key to predicting how justify and align properties behave.

The preview lets you select an item with a mouse or keyboard and adjust its flex-grow, flex-shrink, and flex-basis. New items start at the CSS defaults of 0, 1, and auto. When you copy the output, any item whose sizing differs from those defaults gets its own :nth-child() rule. The varied text sizes also make cross-axis stretching and baseline alignment visible.

Core properties reference

Property	Applies to	Effect
`flex-direction`	Container	Sets main axis: row, row-reverse, column, column-reverse.
`flex-wrap`	Container	Whether items wrap to a new line (nowrap, wrap, wrap-reverse).
`justify-content`	Container	Aligns items along the main axis (flex-start, flex-end, center, space-between, space-around, space-evenly).
`align-items`	Container	Aligns items along the cross axis for a single line (stretch, flex-start, flex-end, center, baseline).
`align-content`	Container	Positions multiple wrapped lines along the cross axis. Available values include `stretch` and `space-evenly`; this property has no effect when there is only one line.
`gap`	Container	Space between items. Shorthand for row-gap and column-gap.
`flex-grow`	Item	Factor by which the item grows if extra space is available. `flex-grow: 1` on all items distributes space equally.
`flex-shrink`	Item	Factor by which the item shrinks if the container is too small. Default 1.
`flex-basis`	Item	Starting size of the item before grow/shrink is applied. `auto` uses the item’s content size.

Common patterns

Use a preset as a starting point, then change the container controls or select individual items to adjust their sizing. Presets only set Flexbox layout values; they do not add logos, navigation markup, or other component styling.

Perfect centering: display: flex; justify-content: center; align-items: center on the container. This is the simplest way to center anything in CSS.
Navigation bar: display: flex; justify-content: space-between puts the logo on the left and nav links on the right automatically.
Equal-width columns: the Equal-width cards preset sets every item to flex-grow: 1 and flex-basis: 0, distributing each flex line's free space evenly across its items.

The preview starts with eight items so wrapping is visible in a typical browser window. Adjust the item count from 1 to 12 to see how the available space changes; align-content only changes the placement of lines when wrapping produces more than one line. The gap field accepts values from 0 to 32 pixels, matching the range shown in its control.

Browser compatibility

Flexbox is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge). The old -webkit- prefix is only required for Safari versions prior to 9 (released 2015) and is no longer necessary for any actively maintained browser. If you are not targeting extremely old iOS devices, no vendor prefixes are needed.

Flexbox vs. Grid

Flexbox and CSS Grid solve related but distinct layout problems:

Flexbox is one-dimensional: it arranges items along a single axis (either a row or a column). Use it for navigation bars, button groups, card rows, and any layout where items are arranged in a single direction.
CSS Grid is two-dimensional: it places items in both rows and columns simultaneously. Use it for overall page layout, complex dashboard grids, and anything requiring precise placement in two dimensions.

A common pattern is to use Grid for the overall page structure and Flexbox within individual components. The two can be freely nested.

Frequently asked questions

What is the difference between justify-content and align-items?

justify-content distributes items along the main axis, which runs horizontally for a row and vertically for a column. align-items positions items on the cross axis, perpendicular to the main axis.

How do I center an item with Flexbox?

Set justify-content and align-items to center on the container. The Centered preset applies both settings so you can inspect and copy the CSS.

When should I use flex-wrap?

Use wrap when items should move onto another line if they do not fit on the current line. nowrap keeps a single line and may shrink items or let them overflow.

What does flex-grow control?

flex-grow is an item-level factor for sharing extra space on a flex line. Select an item to change its grow, shrink, and basis values; the Equal-width cards preset sets grow to 1 and basis to 0 for each item.

When should I use Flexbox instead of CSS Grid?

Flexbox is designed to arrange content along one main axis, such as a navigation row or a vertical stack. CSS Grid is a better fit when a layout needs planned rows and columns at the same time.