⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

justify-content: space-between Erklärt (CSS)

Erstellen Sie visuell ein CSS-Flexbox-Layout: Flex-Direction, Justify-Content, Align-Items, Flex-Wrap und Lücke im Container sowie Flex-Grow, Flex-Shrink und Flex-Basis pro Kind, alles mit Live-Vorschau und kopierbarem CSS.

Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Generator geöffnet, wobei „justify-content“ auf „space-between“ eingestellt ist: Das erste Feld schließt bündig an die Startkante des Containers an, das letzte Feld schließt bündig an dessen Endkante ab und der verbleibende Platz wird in gleichmäßige Lücken zwischen den Feldern in der Mitte aufgeteilt – niemals vor dem ersten oder nach dem letzten.

Das ist das Detail, das die Leute verwechseln. Mit „space-around“ erhält jede Box auf beiden Seiten einen gleichen Rand, sodass die Lücken zwischen den Boxen am Ende doppelt so breit sind wie die Lücken an den beiden Außenkanten (jede Kante erhält nur den Rand einer Box, nicht zwei). space-evenly geht noch einen Schritt weiter und sorgt dafür, dass jeder Spalt die gleiche Größe hat, einschließlich der beiden Außenkanten – der einzige der drei, bei dem der Abstand über die gesamte Länge vollkommen gleichmäßig aussieht.

Wechseln Sie im Dropdown-Menü „Inhalt ausrichten“ zwischen den drei Werten unten und beobachten Sie, wie sich die gleichen drei Kästchen neu anordnen – das ist der schnellste Weg, den Unterschied zu erkennen, anstatt ihn sich einzuprägen. Kopieren Sie das CSS für dasjenige, das dem tatsächlich gewünschten Abstand entspricht.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Container-Steuerelemente: Flex-Richtung, Justify-Content, Align-Items, Flex-Wrap und eine Lückeneingabe in Pixel, die live auf die Vorschau angewendet wird.
  • Standardmäßig drei farblich gekennzeichnete untergeordnete Felder (bis zu acht hinzufügen, bis zu zwei entfernen), jedes mit seinen eigenen Flex-Grow-, Flex-Shrink- und Flex-Basis-Feldern.
  • Kopierbarer CSS-Block mit einer .flex-container-Regel plus einer .flex-item-N-Regel pro untergeordnetem Element, die nicht standardmäßige Flex-Eigenschaften aufweist.

Wichtigste Vorteile

✓ Jedes Container-Steuerelement und jedes untergeordnete Flex-Grow-, Flex-Shrink- und Flex-Basis-Update werden in drei nummerierten Vorschauboxen live aktualisiert, sodass Sie genau sehen können, was Ihre Flexbox-Regeln bewirken, bevor Sie ein Stylesheet berühren.
✓ Der Generator druckt nur untergeordnete Regeln, die tatsächlich von den CSS-Standardeinstellungen abweichen, sodass der kopierte Code kurz und lesbar bleibt, anstatt „flex-grow: 0“ in jedem Feld erneut anzugeben.
✓ Voreingestellte Seiten lösen die Layouts, nach denen Menschen namentlich suchen: Zentrieren eines Div, einer Logo-Links-Links-Rechts-Navigationsleiste und flexible Spalten gleicher Breite – öffnen Sie eine und das Tool ist bereits konfiguriert.

Anwendungsfälle

  • • Holen Sie sich das genaue CSS, um ein Div sowohl horizontal als auch vertikal zu zentrieren, indem Sie beobachten, wie justify-content und align-items in Live-Vorschaufeldern funktionieren.
  • • Erstellen Sie ein Navigationsleistenlayout mit Logo links und Links rechts mit „space-between“ und „align-items:center“ und kopieren Sie dann das Container-CSS direkt in Ihre Header-Komponente.
  • • Vergleichen Sie „space-between“, „space-around“ und „space-equally“ nebeneinander in denselben drei Kästchen, anstatt zu raten, welches dem gewünschten Abstand entspricht.