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

justify-content positioniert Elemente entlang der Hauptachse (die durch flex-direction festgelegte Richtung), während align-items sie entlang der senkrechten Querachse positioniert.

Was ist die Hauptachse?

Die primäre Richtung, in der Elemente fließen. Mit flex-direction: row ist sie horizontal; mit column ist sie vertikal.

Wann ist flex-wrap relevant?

Nur wenn die Elemente zusammen breiter (oder höher) als der Container sind. Mit wrap verschieben sich überschüssige Elemente auf eine neue Zeile, anstatt zu schrumpfen oder überzulaufen.

gap fügt gleichmäßigen Abstand zwischen Flex-Elementen hinzu, ohne Margins zu benötigen, und hält das Layout sauber.

Wird etwas an einen Server gesendet?

Nein. Die Spielwiese läuft vollständig in Ihrem Browser und es wird nichts hochgeladen.

Flexbox-Spielwiese

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Elemente: 4

Vorschau

CSS

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

So wird's verwendet

Flex-Eigenschaften mit den Schaltflächen umschalten.
Vorschau-Boxen in Echtzeit neu anordnen beobachten.
Anzahl der Elemente anpassen und CSS ins Projekt kopieren.

Hauptachse und Querachse

Ein Flex-Container ordnet Elemente entlang einer Hauptachse an, die durch flex-direction (Zeile oder Spalte) festgelegt wird. justify-content positioniert Elemente entlang dieser Hauptachse, während align-items sie entlang der Querachse (senkrecht dazu) positioniert. flex-wrap entscheidet, ob Elemente auf neue Zeilen umbrechen, und gap fügt gleichmäßigen Abstand zwischen ihnen hinzu.

Funktionen

Alle wichtigen Eigenschaften

Direction, justify-content, align-items, wrap und gap steuern.

Live-Vorschau

Elemente ordnen sich beim Ändern jeder Eigenschaft sofort neu an.

Anpassbare Elementanzahl

Anzahl der Boxen ändern, um zu sehen, wie Layouts reagieren.

CSS kopieren

Einsatzbereite CSS-Regel für den Container erhalten.

Wann verwenden

Prototyping

Schnell die richtigen Flex-Einstellungen für ein Layout finden, bevor es codiert wird.

Flexbox lernen

Intuition dafür entwickeln, wie justify und align zusammenwirken.

Ausrichtung korrigieren

Kombinationen testen, um Elemente korrekt zu zentrieren oder zu verteilen.

Lehren

Flexbox-Verhalten live für Schüler oder Teammitglieder demonstrieren.

Hinweise

Die Hauptachse folgt flex-direction (row oder column).
justify-content wirkt auf der Hauptachse; align-items auf der Querachse.
Umbrechen ist nur relevant, wenn Elemente die Containerbreite überschreiten.
Alles läuft auf Ihrem Gerät; es wird nichts hochgeladen.

Häufige Fragen

Was ist der Unterschied zwischen justify-content und align-items?: justify-content positioniert Elemente entlang der Hauptachse (die durch flex-direction festgelegte Richtung), während align-items sie entlang der senkrechten Querachse positioniert.
Was ist die Hauptachse?: Die primäre Richtung, in der Elemente fließen. Mit flex-direction: row ist sie horizontal; mit column ist sie vertikal.
Wann ist flex-wrap relevant?: Nur wenn die Elemente zusammen breiter (oder höher) als der Container sind. Mit wrap verschieben sich überschüssige Elemente auf eine neue Zeile, anstatt zu schrumpfen oder überzulaufen.
Was bewirkt gap?: gap fügt gleichmäßigen Abstand zwischen Flex-Elementen hinzu, ohne Margins zu benötigen, und hält das Layout sauber.
Wird etwas an einen Server gesendet?: Nein. Die Spielwiese läuft vollständig in Ihrem Browser und es wird nichts hochgeladen.