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

CSS-Flexbox-Generator

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

Ein Flexbox-Layout verfügt über zwei separate Regelwerke – Eigenschaften für den Container (Flex-Direction, Justify-Content, Align-Items, Flex-Wrap, Gap) und Eigenschaften für jedes untergeordnete Element (Flex-Grow, Flex-Shrink, Flex-Basis) – und ihre Verwechslung ist die häufigste Ursache für „Warum ist das Zentrieren/Wachsen/Umschließen nicht so, wie ich es erwartet habe?“-Fehler. Dieser Generator bringt beide Regelwerke gleichzeitig auf den Bildschirm: Ändern Sie ein beliebiges Container-Steuerelement oder die eigenen Felder eines beliebigen Kindes, und drei nummerierte, farbcodierte Felder werden sofort aktualisiert, sodass Ursache und Wirkung sichtbar bleiben.

Die Containerseite deckt alle Layoutachsen ab: Wählen Sie eine Richtung, legen Sie fest, wie untergeordnete Elemente entlang der Hauptachse mit Blocksatzinhalt verteilt werden, richten Sie sie an der Querachse aus, entscheiden Sie, ob sie in neue Zeilen umgebrochen werden, und legen Sie eine Lücke anstelle von Randhacks zwischen ihnen fest. Die untergeordnete Seite ist genauso real: Fügen Sie bis zu acht Boxen hinzu, entfernen Sie bis zu zwei und geben Sie jedem von ihnen eine eigene Flex-Grow-, Flex-Shrink- und Flex-Basis – der Generator druckt nur dann eine CSS-Regel pro Kind, wenn mindestens eine davon vom Browser-Standard abweicht, sodass der kopierte Code sich bei Boxen, die ihn nicht benötigen, nie mit „flex-grow: 0“ auffüllt.

Voreingestellte Seiten springen direkt zu den Layouts, nach denen die Leute namentlich suchen: Wie zentriert man ein Div (die am häufigsten gestellte CSS-Layout-Frage, gelöst mit justify-content und align-items, die beide auf „center“ gesetzt sind), eine Logo-Links-Links-Rechts-Navigationsleiste, flexible Spalten gleicher Breite über Flex-Grow und ein Vergleich von „space-between“ mit seinen nahen Verwandten „space-around“ und „space-evenly“.

Wie jedes Tool auf dieser Website ist der Generator kostenlos und läuft vollständig in Ihrem Browser: kein Upload, kein Konto, und er funktioniert offline weiter, sobald die Seite geladen wurde.

🛡️
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.