Dev Tool

CSS Flexbox Generator

Build flexbox layouts visually with live preview. Adjust container and item properties, then copy the CSS.

Container

flex-direction

flex-wrap

justify-content

align-items

gap: 8px

Count:4

Click an item in the preview to edit its properties.

.container {
  display: flex;
  gap: 8px;
}