CSS Flexbox Playground

Learn CSS Flexbox with an interactive playground. Adjust properties visually, see instant results, and copy the generated CSS code. Free online tool for developers.

Presets:

Container Properties

Direction

Wrap

Justify Content

Align Items

Align Content

Gap

16px

Items

Preview

1 Item 1

2 Item 2

3 Item 3

4 Item 4

5 Item 5

Generated CSS

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