CSS-Flexbox-Spielplatz

Learn CSS Flexbox with an interactive playground. Adjust properties visually, see sofortige Ergebnisse, and copy the generated CSS code. Frei online tool for developers.

Voreinstellungs:

Container Properties

Richtung

Wrap

Justify Content

Align Items

Align Content

Gap

16px

Items

Vorschau

1 Item 1

2 Item 2

3 Item 3

4 Item 4

5 Item 5

Generiert CSS

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