CSS Flexbox Playground

Build and visualize flexbox layouts interactively. Adjust container and item properties with live preview.

How it works: Adjust container and item properties to build your flexbox layout. See changes instantly in the preview. Copy the generated CSS when ready.

12px
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 12px;
}

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It provides powerful alignment capabilities and dynamic space distribution, making it the go-to choice for component layouts, navigation bars, and responsive designs.

How to Use the Flexbox Playground

Start by adjusting the container properties: flex-direction controls the main axis, justify-content distributes space along it, and align-items positions children on the cross axis. Add or remove child items and customize their individual flex-grow, flex-shrink, and flex-basis values to see how they respond to available space.

Flexbox vs. CSS Grid

Flexbox is designed for one-dimensional layouts — either a row or a column. CSS Grid handles two-dimensional layouts with rows and columns simultaneously. Use Flexbox for component-level layouts (navbars, card rows, form controls) and Grid for page-level layouts. They work great together.

Common Flexbox Patterns

  • Centered content: justify-content and align-items set to center
  • Sidebar layout: one item with fixed width, another with flex-grow: 1
  • Navigation bar: row direction with space-between
  • Holy grail: header, footer, and three-column body using nested flex
  • Equal columns: all children with flex: 1
  • Responsive wrap: flex-wrap with percentage-based flex-basis