Flexbox-Generator
Legen Sie die Eigenschaften fest und lesen Sie in einfachen Worten, was sie tatsächlich bewirken.
- Läuft in Ihrem Browser — Ihr Text wird nirgendwohin gesendet
- Ohne Anmeldung, ohne Kontingent, so oft nutzbar, wie Sie möchten
So funktioniert es
Flexbox ist nicht kompliziert, aber eine Sache erwischt fast jeden: justify-content und align-items bedeuten nicht horizontal und vertikal. Sie bedeuten entlang der Richtung und quer dazu, und die Richtung legen Sie selbst fest.
Die Falle, direkt benannt
Bei flex-direction: row wirkt justify-content horizontal und align-items vertikal. Wechseln Sie zu column, vertauschen sie sich komplett. Jede mit Flexbox verlorene Stunde hat im Wesentlichen hier ihre Ursache. Die Erklärung darunter aktualisiert sich, wenn Sie die Richtung ändern, sodass der Zusammenhang sichtbar wird, statt auswendig gelernt zu werden.
Hauptachse und Querachse
Die Hauptachse ist diejenige, entlang der die Elemente fließen, festgelegt durch flex-direction. Die Querachse steht senkrecht dazu. justify-content verteilt den Platz entlang der Hauptachse; align-items positioniert Elemente auf der Querachse. Sobald sich diese beiden Namen eingeprägt haben, folgt der Rest von selbst.
gap, und warum es Außenabstände ersetzt hat
gap setzt Abstand zwischen Elemente, ohne ihn vor dem ersten und nach dem letzten hinzuzufügen, was genau das ist, was Außenabstände falsch machen und was man früher mit :last-child-Tricks behoben hat. Es wird in jedem aktuellen Browser unterstützt, und es gibt keinen Grund mehr, es zu meiden.
nowrap bedeutet schrumpfen, nicht überlaufen
Der Standard ist nowrap, und Elemente schrumpfen unter ihre natürliche Größe, damit sie passen, statt in eine neue Zeile zu rutschen. Deshalb wird Text in einer Flex-Zeile manchmal unerwartet gestaucht. Mit wrap rutschen die Elemente stattdessen nach unten; min-width: 0 bei einem untergeordneten Element verhindert, dass es unter seinen Inhalt schrumpft.
In beide Richtungen zentrieren
justify-content: center mit align-items: center zentriert ein Element in beide Richtungen, unabhängig von flex-direction – die eine Kombination, die man sich unbedingt merken sollte.
Flexbox-Generator – Fragen
Warum verschiebt align-items Dinge horizontal?
Weil flex-direction auf column steht. Die beiden Eigenschaften folgen der Richtung, nicht dem Bildschirm.
Was ist der Unterschied zwischen Haupt- und Querachse?
Die Hauptachse ist die Richtung, in der die Elemente fließen, festgelegt durch flex-direction. Die Querachse steht senkrecht dazu.
Wie zentriere ich etwas in beide Richtungen?
justify-content: center zusammen mit align-items: center.
Warum ist mein Text gestaucht?
Das Standardverhalten nowrap staucht Elemente, damit sie passen. Setzen Sie flex-wrap: wrap oder min-width: 0 beim untergeordneten Element.
Kann ich gap mit Flexbox verwenden?
Ja, in jedem aktuellen Browser. Es ist besser als Außenabstände, weil es an den Enden keinen Platz hinzufügt.