DeskTray

Flexbox Playground

Understand flexbox by changing properties and watching the items move.

Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile

Click an item to toggle flex-grow: 1.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
flex-direction
flex-wrap
justify-content
align-items
align-content (when wrapping)
gap: 12px
Number of items

How to use Flexbox Playground

  1. Change the container properties.
  2. Click items to toggle flex-grow.
  3. Copy the generated CSS.

Frequently asked questions

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

justify-content positions items along the main axis (horizontal in a row), align-items along the cross axis (vertical in a row).

Flexbox or grid?

Use flexbox for one-dimensional layouts such as nav bars and button rows, and grid for two-dimensional layouts such as card galleries.

Related tools

All Developer Tools →