Flexbox Playground

Learn flexbox interactively

Flex Direction

Justify Content

Align Items

Gap: 8px

Flex Wrap

Item 1

Item 2

Item 3

Item 4

CSS Code

12345678

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

8 lines • 145 characterscss

What is Flexbox Playground?

Interactive flexbox playground. Learn CSS flexbox with visual examples.

Is this tool free to use?

Yes, Flexbox Playground is completely free. No registration required.

Is my data secure?

All processing happens in your browser. Your data never leaves your device.

Generate CSS box shadows

Generate border-radius CSS

Create CSS gradients

Pick colors and get formats