# CSS-Flexbox-Playground

> Erkunde Ausrichtung, Umbruch und Abstände visuell.

[Open tool](https://www.toolcabana.com/de/css-flexbox-playground) · [Design und CSS](https://www.toolcabana.com/de/category/design-and-css)

Tool ID: css-flexbox-playground. Requested language: de. Description language: de. Complete guide translation: yes.

## Overview (en)

CSS flexbox playground previews a flex container with 1 to 30 numbered items and writes the matching CSS. Set flex-direction (row, column or their reverses), justify-content including space-between and space-evenly, align-items, wrap or nowrap, and a gap from 0 to 100 px, then copy the six declarations once the preview looks right.

## Supported tasks (de)

Erkunde Ausrichtung, Umbruch und Abstände visuell.

## Steps (de)

1. Gib die angeforderten Werte im Einstellungsbereich ein.
2. Passe die Grundeinstellungen an und öffne dann den Erweiterten Modus für Export- und Feinabstimmungsoptionen. Benutzerdefinierte Einstellungen bleiben aktiv, wenn das Panel geschlossen wird.
3. Führe den CSS-Flexbox-Playground aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.

## Settings

- Richtung (de; key: direction; type: select): row [de], column [de], row-reverse [de], column-reverse [de]
- Inhalt verteilen (justify-content) (de; key: justify; type: select): flex-start [de], center [de], flex-end [de], space-between [de], space-around [de], space-evenly [de]
- Elemente ausrichten (align-items) (de; key: align; type: select): stretch [de], flex-start [de], center [de], flex-end [de]
- Umbruch (de; key: wrap; type: select): wrap [de], nowrap [de]
- Abstand (px) (de; key: gap; type: number); minimum: 0; maximum: 100
- Elemente (de; key: items; type: number); minimum: 1; maximum: 30

## Limitations (de)

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

## Privacy and connections (de)

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

## Questions (de)

### What is the difference between space-between, space-around and space-evenly?

space-between puts the first and last items at the edges with equal gaps between items. space-around gives each item equal space on both sides, so edge gaps are half the inner ones. space-evenly makes every gap, including the edges, the same. Try each in the preview.

### Why does align-items seem to do nothing in the flexbox preview?

align-items works on the cross axis. With direction row, it moves items vertically inside the 220 px tall preview, and stretch makes them fill that height. With column, it acts horizontally, so switch direction to see the change.

### Does the flexbox playground set flex properties on the items?

No. The output covers only the container: display, flex-direction, justify-content, align-items, flex-wrap and gap. Item properties like flex-grow or order are not generated, so add them separately if individual items need to size differently.

### Wo wird meine Eingabe verarbeitet?

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

### Welche Eingabelimits gelten?

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/de/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/de/css-grid-layout-generator)
- [CSS cubic Bezier editor](https://www.toolcabana.com/de/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/de/css-clip-path-maker)