6XC

CSS-Flexbox-Spielwiese

Passen Sie flex-direction, justify-content, align-items, wrap und gap an Live-Boxen an und kopieren Sie das Container-CSS.

850 Aufrufe

1
2
3
4
5

Flexbox in Kürze

display: flex verwandelt einen Container in eine eindimensionale Layout-Engine. justify-content verteilt Elemente entlang der Hauptachse, align-items richtet sie auf der Querachse aus, flex-direction wählt die Achse, und gap schafft Abstand ohne Margins. Spielen Sie mit den Reglern und beobachten Sie, wie sich die nummerierten Boxen live neu anordnen.

Häufig gestellte Fragen

Wie zentriere ich etwas perfekt?

Die berühmten drei Zeilen: display: flex; justify-content: center; align-items: center; — horizontale und vertikale Zentrierung auf einen Schlag.

Flexbox oder Grid?

Flexbox glänzt bei eindimensionalen Zeilen oder Spalten, die sich am Inhalt orientieren (Toolbars, Navigation, Kartenreihen). Grid ist für zweidimensionale Layouts mit expliziten Spuren gebaut. Beide lassen sich gut kombinieren.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen