CSS Tool

Flexbox Generator

Visual CSS flexbox playground with live preview. Configure container and item properties, apply common layout presets, and export clean CSS code.

.fx-container {
  display: flex;
  gap: 10px;
}

flex-direction

justify-content

align-items

align-content

flex-wrap

gap10px

Item 1 grow:0 shrink:1 basis:auto

Item 2 grow:0 shrink:1 basis:auto

Item 3 grow:0 shrink:1 basis:auto

flex-grow0

flex-shrink1

flex-basis

order0

align-self