CSS Flexbox Playground

Name: CSS Flexbox Playground
Rating: 4.8 (531 reviews)

Learn and experiment with all CSS Flexbox properties visually to build complex layouts.

CSS Flexbox Playground

Experiment with Flexbox properties and see the results in real-time.

Container Properties

justify Content

align Items

flex Direction

flex Wrap

align Content

Item 1

Item 2

Item 3

Item 4

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