Free CSS Flexbox Playground

Test Flexbox layouts visually with a live flexbox generator.

A CSS flexbox playground is an interactive tool that lets you adjust container and item properties and see the layout update instantly. Use this free CSS flexbox tester to learn how direction, alignment, wrapping, and sizing work without guessing in a larger project.

css flexbox playgroundflexbox generatorcss flexbox testerflexbox layout tool

Want more than a flexbox layout tool? Explore the full Zap Code builder to turn layouts into real apps and games.

What this tool includes

Full container controls

Adjust direction, wrapping, alignment, and spacing in one panel.

Per-item Flexbox rules

Test flex-grow, flex-shrink, flex-basis, align-self, and order on every item.

Ready-made layout presets

Compare centered, sidebar, holy grail, navbar, and card grid patterns instantly.

Interactive Flexbox Playground

Start from a real layout preset or dial in every property manually. The preview and generated CSS stay in sync while you experiment.

Preset Layouts

Load common Flexbox patterns

Each preset starts with sensible flex values so you can compare practical layout structures before making them your own.

Container Properties

Control the flex container

The container controls the main axis, cross axis, wrapping behavior, and spacing between items.

display

flex-direction

justify-content

align-items

align-content

align-content becomes visible when items wrap into multiple lines.

flex-wrap

gap14px

Flex Items

Tune individual item behavior

Flexbox becomes clearer when you compare how each item grows, shrinks, reorders, or overrides the container alignment.

Header

Preview color is tied to this item for easy visual tracking.

Label

flex-basis

order0

flex-grow0

flex-shrink0

align-self

Nav

Preview color is tied to this item for easy visual tracking.

Label

flex-basis

order1

flex-grow0

flex-shrink0

align-self

Main

Preview color is tied to this item for easy visual tracking.

Label

flex-basis

order2

flex-grow1

flex-shrink1

align-self

Aside

Preview color is tied to this item for easy visual tracking.

Label

flex-basis

order3

flex-grow0

flex-shrink1

align-self

Footer

Preview color is tied to this item for easy visual tracking.

Label

flex-basis

order4

flex-grow0

flex-shrink0

align-self

Live Preview

Holy grail

Header, nav, main content, sidebar, and footer using one wrapped flex container.

Flex item

Header

grow 0 / shrink 0

basis 100%

order 0

Flex item

Nav

grow 0 / shrink 0

basis 170px

order 1

Flex item

Main

grow 1 / shrink 1

basis 0px

order 2

Flex item

Aside

grow 0 / shrink 1

basis 150px

order 3

Flex item

Footer

grow 0 / shrink 0

basis 100%

order 4

display: flexdirection: rowjustify: flex-startalign-items: stretchwrap: wrapgap: 14px

Generated CSS

Copy the live output

The CSS below updates as soon as you change a container or item value.

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

.flex-item {
  padding: 1rem;
  border-radius: 1rem;
}

/* Item 1: Header */
.flex-item:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  align-self: auto;
  order: 0;
}

/* Item 2: Nav */
.flex-item:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 170px;
  align-self: auto;
  order: 1;
}

/* Item 3: Main */
.flex-item:nth-child(3) {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  align-self: auto;
  order: 2;
}

/* Item 4: Aside */
.flex-item:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 150px;
  align-self: auto;
  order: 3;
}

/* Item 5: Footer */
.flex-item:nth-child(5) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  align-self: auto;
  order: 4;
}

Use the generated rules with a `.flex-container` wrapper and `.flex-item` children in your own project.

How to use this flexbox layout tool

Load a preset flexbox layout

Start with centered, sidebar, holy grail, navbar, or card grid to see a real pattern before you edit individual properties.

Adjust the flex container

Change flex-direction, justify-content, align-items, align-content, flex-wrap, and gap to understand how the container controls the whole layout.

Tune each flex item

Edit flex-grow, flex-shrink, flex-basis, align-self, and order on each item to see how item-level rules reshape the final result.

Copy the generated CSS

Use the copy button to grab the live CSS output and paste it directly into your project, prototype, or lesson notes.

Frequently asked questions about CSS Flexbox

Common questions about alignment, wrapping, item sizing, and when to choose Flexbox over Grid.

What is a CSS flexbox playground?

A CSS flexbox playground is an interactive tool that lets you change flex container and flex item properties and see the layout update instantly. It is useful for learning how Flexbox works because direction, alignment, wrapping, and sizing all respond in real time.

What does justify-content do in Flexbox?

justify-content controls how flex items are distributed along the main axis. In a row layout that means horizontal spacing, and in a column layout it means vertical spacing. Values like center, space-between, and space-evenly make it easy to compare layout behaviors quickly.

What is the difference between align-items and align-content?

align-items controls how items sit on the cross axis within a single line, while align-content controls how multiple wrapped lines are spaced inside the container. If flex-wrap is set to nowrap, align-content usually will not create a visible change.

How do flex-grow, flex-shrink, and flex-basis work together?

flex-basis sets the starting size, flex-grow decides how extra space is shared, and flex-shrink decides how items compress when there is not enough room. Testing these three values side by side is one of the fastest ways to understand real Flexbox sizing behavior.

When should I use Flexbox instead of CSS Grid?

Use Flexbox when you are aligning items in one dimension, such as a row of buttons, a centered hero block, or a responsive navbar. Use CSS Grid when you need precise two-dimensional control over rows and columns at the same time.

Keep exploring with more free tools

Practice layout, color, and animation skills together, then head back to Zap Code to build a full project.

Visit zapcode.dev

Test Flexbox layouts visually with a live flexbox generator.

Interactive Flexbox Playground

Load common Flexbox patterns

Control the flex container

Tune individual item behavior

How to use this flexbox layout tool

Load a preset flexbox layout

Adjust the flex container

Tune each flex item

Copy the generated CSS

Frequently asked questions about CSS Flexbox

What is a CSS flexbox playground?

What does justify-content do in Flexbox?

What is the difference between align-items and align-content?

How do flex-grow, flex-shrink, and flex-basis work together?

When should I use Flexbox instead of CSS Grid?

Keep exploring with more free tools

CSS Animation Playground

Color Picker

Coding Quiz for Kids