Wofür Flexbox-Generator gedacht ist
Stellt alle Kernregeln eines Flex-Containers per Auswahl ein – Vorschau mit klickbaren Elementen inklusive, CSS-Code zum Kopieren daneben.
Bedienung
- flex-direction und justify-content wählen
- align-items und Umbruchverhalten einstellen
- Abstand und Elementanzahl anpassen
- Das CSS kopieren und ins eigene Projekt übernehmen
Typische Anwendungen: Kartenraster und Toolbars ausrichten, Flex-Regeln lernen, ohne zu raten, Kleine Layouts prototypisieren.
Fragen und Antworten
Warum richtet justify-content bei column vertikal aus?
Weil bei column die Hauptachse vertikal läuft. justify-content wirkt immer entlang der Hauptachse – die Auswahl dreht also die Wirkung mit.
Was ist der Unterschied zwischen gap und margin?
gap verteilt Abstand nur zwischen den Flex-Elementen, ohne Außenabstände am Rand.margin gehört zu jedem Element einzeln und betrifft auch den Containerrand.
Wann brauche ich flex-wrap?
Wenn Elemente bei engem Platz in die nächste Zeile umbrechen sollen. Ohne wrap schrumpfen sie, bis sie passen – beides hat seinen Use Case.
Wohin gehört der erzeugte Code?
In den Container, nicht in die Kind-Elemente. Die Regeln für Ausrichtung und Abstand gelten am Container; die Elemente selbst brauchen meist nur ihre Größe.
Einschränkungen
Die Vorschau zeigt bewusst die Grundregeln ohne Zusatz-CSS – so sehen Sie genau, was Ihre Auswahl bewirkt. justify-content steuert die Hauptachse, align-items die Querachse; bei column tauschen die beiden die Rollen.
Was das Werkzeug kann
Alle vier Kernregeln per Auswahl, Abstand über modernes gap, Zwei bis zwölf Beispiel-Elemente, Fertiges CSS zum Kopieren
Wer hier weitermacht, findet oft gleich das Nächste: