Einführung in den CSS Flexbox-Generator
Der Flexbox-Generator ist ein interaktives Werkzeug, mit dem Sie visuell einen Flex-Container und seine Elemente einrichten können. Durch das Manipulieren von Steuerelementen definieren Sie das Layout, beobachten alle Änderungen sofort in einer Live-Vorschau und kopieren anschließend den generierten CSS-Code für Ihr Design.
Dieses Tool eignet sich für alle, die ein CSS-Flexbox-Layout visuell gestalten möchten, schnell CSS für einen Flex-Container und dessen Elemente erzeugen müssen oder die Wirkung verschiedener Flexbox-Eigenschaften auf ein Layout verstehen wollen. Zudem hilft es bei der Erstellung gängiger Layouts wie zentrierten Elementen, Navigationsleisten, Stapeln, Karten oder Seitenleisten.
Einstellungen für den Container
Der Flex-Container bildet die Basis des Layouts. Im Generator können Sie die folgenden Eigenschaften für den Container festlegen, um das Verhalten der darin liegenden Elemente zu steuern:
- Richtung (flex-direction): Bestimmt die Ausrichtung der Hauptachse. Sie haben die Wahl zwischen Zeile (Row), Zeile umgekehrt, Spalte (Column) und Spalte umgekehrt. Das Umschalten der Richtung von einer Zeile zu einer Spalte vertauscht die Haupt- und Querachse, was die Funktionsweise von Ausrichtung Hauptachse (justify-content) und Elemente ausrichten (align-items) direkt beeinflusst.
- Umbruch (flex-wrap): Steuert, ob die Elemente auf eine Zeile gezwungen werden oder umbrechen dürfen. Die Optionen sind Kein Umbruch, Umbruch und Umbruch umgekehrt. Wenn der Umbruch deaktiviert ist (Kein Umbruch), werden alle Elemente in eine einzige Zeile gezwungen. Ist der Umbruch aktiviert (Umbruch), weichen Elemente, die keinen Platz mehr finden, auf die nächste Zeile aus.
- Ausrichtung Hauptachse (justify-content): Regelt die Verteilung der Elemente entlang der Hauptachse. Zur Auswahl stehen Start, Ende, Zentriert, Abstand dazwischen, Abstand ringsum und Gleichmäßiger Abstand.
- Elemente ausrichten (align-items): Bestimmt, wie die Elemente entlang der Querachse ausgerichtet werden. Die Optionen umfassen Start, Ende, Zentriert, Strecken und Baseline.
- Inhalt ausrichten (align-content): Diese Eigenschaft kommt ins Spiel, wenn der Umbruch aktiviert ist und Elemente auf mehrere Zeilen verteilt sind. Sie richtet diese Zeilen als Gruppe aus. Die verfügbaren Optionen sind Start, Ende, Zentriert, Strecken, Abstand dazwischen, Abstand ringsum und Gleichmäßiger Abstand.
- Abstand (Gap): Ermöglicht die Eingabe eines numerischen Werts, der den Abstand zwischen den einzelnen Elementen sowie zwischen den Zeilen definiert.
Einstellungen für einzelne Elemente
Zusätzlich zu den globalen Container-Eigenschaften können Sie im Generator spezifische Werte für die einzelnen Elemente festlegen. Wenn Sie auf die Schaltfläche Element hinzufügen klicken, erscheint ein neues Element in der Live-Vorschau (beispielsweise „Element 5“). Für jedes Element lassen sich folgende Parameter individuell konfigurieren:
- Reihenfolge (order): Ein numerischer Wert, der die visuelle Reihenfolge des Elements im Verhältnis zu den anderen Elementen bestimmt.
- Wachsen (flex-grow): Ein numerischer Wert, der festlegt, wie stark das Element wächst, um verfügbaren Platz im Container auszufüllen.
- Schrumpfen (flex-shrink): Ein numerischer Wert, der bestimmt, wie stark das Element schrumpft, wenn der Platz im Container knapp wird.
- Basis (flex-basis): Bestimmt die Ausgangsgröße des Elements. Hier kann ein numerischer Wert oder Auto (bzw. Auto-Basis) eingetragen werden.
- Selbst ausrichten (align-self): Ermöglicht es einem einzelnen Element, die für den Container definierte Ausrichtung der Querachse zu überschreiben. Die Optionen sind Auto, Start, Ende, Zentriert, Strecken und Baseline.
Live-Vorschau und CSS-Ausgabe
Der Generator liefert zwei direkte Ergebnisse basierend auf Ihren Eingaben:
- Eine visuelle Live-Vorschau, die jede Änderung an den Reglern des Containers oder der Elemente sofort darstellt.
- Den fertigen CSS-Code für den Flex-Container und seine Elemente.
Dabei gilt die Regel, dass nur für diejenigen Elemente eigene CSS-Regeln generiert werden, deren Eigenschaften Sie tatsächlich manuell verändert haben. Sobald Sie mit dem Layout zufrieden sind, können Sie auf die Schaltfläche CSS kopieren klicken. Der Zustand der Schaltfläche ändert sich nach dem Klick auf „Kopiert“, um den erfolgreichen Kopiervorgang zu bestätigen.
Datenschutz und Verarbeitung
Ihre Privatsphäre bleibt bei der Nutzung des Tools vollständig geschützt. Das Layout wird direkt in Ihrem Browser erstellt. Keine Ihrer Einstellungen oder Daten, die Sie im Tool festlegen, werden an BroBroGo übertragen oder hochgeladen.
Häufig gestellte Fragen (FAQ)
Was ist der Unterschied zwischen justify-content und align-items? Justify-content verteilt die Elemente entlang der Hauptachse – also in Verlaufsrichtung der Zeile oder Spalte –, während align-items sie entlang der Querachse positioniert. Wenn Sie die Richtung von Row auf Column ändern, werden die beiden Achsen vertauscht, sodass justify-content von oben nach unten und align-items von links nach rechts wirkt.
Wie funktionieren die Einstellungen für einzelne Elemente? Wählen Sie ein Element anhand seiner Nummer aus und legen Sie fest, wie stark es wächst (flex-grow), um freien Platz zu füllen, wie stark es schrumpft (flex-shrink), wenn der Platz knapp wird, welche Ausgangsgröße es hat (flex-basis) und wie es sich an der Querachse ausrichtet. Mit „Order“ verschieben Sie ein Element visuell nach vorne oder hinten, ohne das HTML anzupassen. Nur Elemente, die Sie tatsächlich ändern, erhalten eine eigene CSS-Regel.
Wann spielen Wrap und align-content eine Rolle? Wenn der Zeilenumbruch (Wrap) deaktiviert ist, werden alle Elemente in eine einzige Zeile gezwungen und können schmaler gestaucht werden. Aktivieren Sie ihn, brechen Elemente, die nicht mehr hineinpassen, in die nächste Zeile um. In diesem Fall steuert align-content die Abstände der Zeilen als Gruppe. „Gap“ definiert den Abstand zwischen Elementen und Zeilen, ganz ohne Margins.