Flexbox Playground

Explore CSS Flexbox properties interactively — see what every value does.

Configure every container property — flex-direction, flex-wrap, justify-content, align-items, align-content, and gap — with one-click buttons. See the result live in the preview as you toggle values.

Click any item to edit its flex-grow, flex-shrink, flex-basis, order, and align-self. Start from one of 10 pre-built patterns — Navbar, Centering, Sidebar, Card Row, and more — then export CSS, HTML, or Tailwind code. Everything runs in your browser.

Container

flex-direction

flex-wrap

justify-content

align-items

gap

8px

Items (4)

Item 10-1-a

Item 20-1-a

Item 30-1-a

Item 40-1-a

Preview

rownowrapflex-start

Item 1

Item 2

Item 3

Item 4

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

Frequently Asked Questions

Common questions about Flexbox, layout patterns, and this tool.

Related Tools

More developer tools from ToolFox — grid, colors, and cheat sheets.

Tailwind CSS Cheat SheetEvery utility class, every version. Searchable & copyable.CSS Grid GeneratorVisual CSS Grid builder with code export.Color ConverterConvert between HEX, RGB, HSL, and OKLCH.