Dev Tools

Flexbox Playground

Build flexbox layouts interactively. Control parent and child flex properties and copy the generated CSS.

Container Properties
Preview
1
2
3

Click an item to select it and edit its properties below.

CSS Code
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Related tools

CSS Grid GeneratorCSS

Visual CSS Grid layout generator with cell spanning.

CSS Columns GeneratorCSS

Generate multi-column CSS layouts with gap, rule style, and width controls.

CSS Gradient GeneratorCSS

Build beautiful CSS gradients visually with a live preview.

Box Shadow GeneratorCSS

Create CSS box-shadow values visually with multiple shadows and live preview.

Border Radius GeneratorCSS

Visual CSS border-radius editor with per-corner control.

CSS Animation GeneratorCSS

Build CSS @keyframes animations visually with live preview.