Design & CSS

Flexbox Playground

Configure the container and each child item visually, see the layout update live, hover an item to read its flex shorthand, then copy CSS, Tailwind, HTML, React JSX, or JSON. 10 ready-to-use layout presets included.

Live preview

Show axes

Click an item to focus it in the editor. Hover to see its current flex shorthand.

Container widthpxContainer heightpx

Background

Layout presets

Drop-in starting points for the common patterns: nav bars, sidebars, hero blocks, card grids.

Flex container

Every property maps 1:1 to a CSS flex container property — change one, the preview re-renders.

flex-direction

flex-wrap

justify-content

align-items

align-content

Column gap (column-gap)pxRow gap (row-gap)px

Flex items

3 / 12

Up to 12 items. Click a chip below or an item in the preview to edit its flex properties.

Select an item below — or in the preview — to tune its flex properties.

Code output

Plain CSS, Tailwind utilities, raw HTML, React JSX, or a JSON snapshot you can share.

.flex-container {
  display: flex;
  gap: 16px;
}