Was ist der Unterschied zwischen justify-content und align-items?

justify-content verteilt Items entlang der Hauptachse (die durch Flex-Richtung festgelegte Richtung), während Align-Items sie auf der senkrechten Querachse positioniert. Das Umschalten der Flex-Richtung zwischen Zeile und Spalte tauscht effektiv aus, welche Achse jede steuert.

Warum hat Align-Content manchmal keinen sichtbaren Effekt?

align-Content gilt nur, wenn sich Artikel auf mehrere Zeilen wickeln. Stellen Sie Flex-Wrap so ein, dass es eingewickelt wird, und fügen Sie genügend Elemente hinzu, die sie in eine zweite Reihe einbrechen, bevor Sie den Align-Content ändern, um zu sehen, wie es funktioniert.

CSS Flexbox Generator

Experimentieren Sie visuell mit CSS Flexbox – passen Sie jede Containereigenschaft an und kopieren Sie das generierte CSS.

flex-directionflex-wrapjustify-contentalign-itemsalign-contentgap

Items: 5

1 to 12 items.

Preview

CSS

Was this tool helpful?

Send output to:

How to use Flexbox Generator

Wählen Sie eine Flex-Richtung und Flex-Wrap für den Container.
Justieren Sie justify-content, align-items, align-content und die Lücke.
Verwenden Sie Element hinzufügen und Element entfernen, um festzulegen, wie viele Boxen in der Vorschau erscheinen.
Kopieren Sie den generierten Container CSS und fügen Sie ihn in Ihr Projekt ein.

Was ist Flexbox-Generator?

Dieses Tool ist ein praktischer Spielplatz für das CSS flexible Box-Layout. Durch die Umwandlung eines Containers in einen Flex-Kontext mit display: flex wird eine leistungsstarke eindimensionale Ausrichtung freigeschaltet, und mit diesem Generator können Sie jede Container-Eigenschaft auf einmal anzeigen, anstatt zu raten.

Ändern Sie die Hauptachsenrichtung, steuern Sie das Einwickeln, verteilen Sie Elemente mit justify-content, richten Sie sie auf der Querachse mit align-items aus und fügen Sie Abstand mit gap hinzu. Hinzufügen oder Entfernen von nummerierten Boxen, um zu sehen, wie echte Elemente reagieren, und kopieren Sie dann das fertige CSS direkt in Ihr Stylesheet. Alles läuft lokal in Ihrem Browser.

FAQ

Was ist der Unterschied zwischen justify-content und align-items?: justify-content verteilt Items entlang der Hauptachse (die durch Flex-Richtung festgelegte Richtung), während Align-Items sie auf der senkrechten Querachse positioniert. Das Umschalten der Flex-Richtung zwischen Zeile und Spalte tauscht effektiv aus, welche Achse jede steuert.
Warum hat Align-Content manchmal keinen sichtbaren Effekt?: align-Content gilt nur, wenn sich Artikel auf mehrere Zeilen wickeln. Stellen Sie Flex-Wrap so ein, dass es eingewickelt wird, und fügen Sie genügend Elemente hinzu, die sie in eine zweite Reihe einbrechen, bevor Sie den Align-Content ändern, um zu sehen, wie es funktioniert.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Flexbox Generator on Wikipedia·Developer Tools on Wikipedia·Flexbox Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Flexbox Generator

Something went wrong

How to use Flexbox Generator

Was ist Flexbox-Generator?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts