🎨

CSS Flexbox Playground

css · flexbox · layout

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 8px

Items: 6

CSS

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

How to use

1
Adjust the flex properties.
2
Watch the live preview update.
3
Copy the generated CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

Visually experiment with CSS Flexbox properties. Adjust direction, wrap, justify, align, and gap in real-time and copy the generated CSS. You can use it for free with no sign-up or installation — just open the page and start right away.