Toolsvana→Design Tools→CSS Flexbox Playground

CSS Flexbox Playground

Interactive playground to learn and generate Flexbox layouts

Preset Layouts

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 10px

0px50px

Items: 5

Live Preview

💻Generated CSS

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

Quick Reference

Main Axis

justify-content controls alignment along the main axis (determined by flex-direction).

Cross Axis

align-items controls alignment along the cross axis (perpendicular to flex-direction).

Multi-line

align-content only applies when flex-wrap is set to wrap or wrap-reverse with multiple lines.

About CSS Flexbox Playground

The CSS Flexbox Playground is a visual, interactive tool for learning and experimenting with CSS Flexbox layouts. Flexbox (Flexible Box Layout) is one of the most powerful and widely used CSS layout modules, designed to arrange items within a container with flexible, responsive behavior. This tool lets you manipulate every flex container and flex item property in real time and see exactly how your layout changes.

Key Features

Full control over all flex container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, and gap
Per-item overrides: order, flex-grow, flex-shrink, flex-basis, and align-self
Live visual preview with colored, numbered items and a dashed container boundary
Preset layouts including Navigation Bar, Card Grid, Holy Grail, Centered Content, and Sidebar Layout
Auto-generated CSS code with one-click copy functionality
Dynamic item count control from 1 to 12 items
Click-to-select items for per-item property editing
Dark mode support for comfortable use in any lighting condition

Understanding Flexbox Properties

Flexbox works along two axes: the main axis (defined by flex-direction) and the cross axis (perpendicular to the main axis). The justify-content property distributes space along the main axis, while align-items handles alignment on the cross axis. When flex-wrap allows wrapping onto multiple lines, align-content controls spacing between those lines. Each flex item can override its alignment with align-self, control its growth and shrinkage ratios, and set a base size with flex-basis.

Common Flexbox Layout Patterns

Flexbox excels at building navigation bars, centering content both horizontally and vertically, creating card grids that wrap responsively, building sidebar layouts with a fixed sidebar and fluid main content, and implementing the classic Holy Grail layout with header, footer, sidebar, and main content areas. Use the preset buttons to instantly see these patterns in action.