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

Flexbox-Spalten gleicher Breite – CSS-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

Auf dieser Seite wird der Generator geöffnet, wobei „flex-grow:1“ bereits auf allen drei Vorschaufeldern eingestellt ist. Beobachten Sie sie: Anstatt sich an ihren Inhalt anzupassen, beansprucht jedes Feld einen identischen Anteil des verbleibenden Platzes in der Zeile, was das ganze Rezept für flexible Spalten gleicher Breite ist – keine prozentualen Breiten, kein calc(), keine feste Pixelberechnung, um synchron zu bleiben.

Flex-Grow: 1 sagt einem Kind, dass es wachsen soll, und wenn man es auf jedes Kind in der Reihe setzt, wachsen alle um den gleichen Betrag, sodass sie am Ende die gleiche Breite haben, unabhängig davon, wie viele es sind oder welcher Inhalt sich darin befindet. Fügen Sie mit den Steuerelementen unten ein Feld hinzu oder entfernen Sie es, und die verbleibenden Spalten werden sofort neu verteilt, um gleich zu bleiben. Ändern Sie in der Produktion die Größe eines Browserfensters über diesem Layout, und es verhält sich genauso.

Dies ist das Muster hinter gleichhohen Kartenrastern, Preistabellenspalten und gleichmäßig aufgeteilten Fußzeilenabschnitten. Geben Sie einer Spalte mehr Platz, indem Sie ihr Flex-Grow über die anderen anheben, oder kopieren Sie den CSS-Block unten genau so, wie er generiert wurde, um eine saubere, gleichmäßige Aufteilung zu erzielen.

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