Farbformate umwandeln
HEX-, RGB- und HSL-Farben mit Transparenz umrechnen, als Farbfeld ansehen und als CSS-Wert kopieren.
CSS-Flexbox-Generator
Richtung, Umbruch, Verteilung und Ausrichtung ausprobieren und passenden CSS- und HTML-Code erhalten.
Über dieses Tool
Planen Sie eine Reihe von Bedienelementen und prüfen Sie ihr Verhalten bei knappem Platz.
Anwendung
Flex-Einstellungen wählen, Abstand und Elementzahl ändern und den Umbruch bei verschiedenen Vorschau-Breiten prüfen. CSS und HTML lassen sich separat exportieren.
Vorschau und Code nutzen dieselben Flex-Eigenschaften. Elemente beginnen mit 100 px Basisbreite und 80 px Mindesthöhe. Bis 48 Elemente und 0–80 px Abstand. Die Vorschau-Breite wird nicht exportiert.
Häufige Fragen
Enthält die Ausgabe die Vorschaubreite?
Nein. Diese simuliert lediglich verfügbaren Platz. Exportiert werden Flex-Regeln und grundlegende Elementgrößen; die tatsächliche Containerbreite und Gestaltung bestimmen Sie auf Ihrer Seite.
Warum ändert sich die Zentrierung bei column?
justify-content wirkt auf der Hauptachse, align-items auf der Querachse. Bei row verläuft die Hauptachse horizontal, bei column vertikal. Für eine Zentrierung auf beiden Achsen wählen Sie zweimal center; der Container muss auf den jeweiligen Achsen ausreichend freien Platz bieten.
Verwandte Werkzeuge
Wird in einem neuen Tab geöffnet
Kommentare
0