Kategorie: Entwicklung
CSS-Flexbox-Generator
Erstellen Sie einen Flex-Container visuell und kopieren Sie das CSS
Legen Sie flex-direction, flex-wrap, justify-content, align-items und den Abstand an einer Live-Vorschau mit echten Flex-Elementen fest und kopieren Sie anschließend die fertige Container-Deklaration. Nichts davon verlässt Ihren Browser.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Flexbox hat fünf Eigenschaften, die zusammenspielen – die Richtung bestimmt, was „Hauptachse“ für Umbruch und justify-content überhaupt bedeutet –, weshalb es schneller geht, eine Änderung zu sehen, als sie sich vorzustellen. Dieses Tool zeigt einen echten Flex-Container mit nummerierten Elementen darin, sodass jede Option daran gemessen wird, wie sich die Boxen tatsächlich bewegen, statt an einem gedanklichen Modell der Spezifikation.
So funktioniert es
- Legen Sie flex-direction und flex-wrap fest.
- Wählen Sie justify-content und align-items, und passen Sie Abstand und Elementanzahl an.
- Kopieren Sie die fertige .container-Regel in Ihr Stylesheet.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Ist die Vorschau ein echtes Flex-Layout?
- Ja. Die nummerierten Boxen werden mit genau dem CSS angeordnet, das Sie gerade festlegen, nicht mit einem Bild davon, sodass die kopierte Regel genau das erzeugt, was Sie sehen.
- Warum ändert flex-direction, was justify-content bewirkt?
- justify-content wirkt immer entlang der Hauptachse, und flex-direction entscheidet, ob die Hauptachse horizontal oder vertikal verläuft. Der Wechsel zu column macht aus „justify“ von links/rechts ein oben/unten.
- Wird etwas über mein Layout hochgeladen?
- Nein. Das CSS ist Text, der auf der Seite aus den von Ihnen gesetzten Optionen zusammengestellt wird, und die Vorschau wird lokal gerendert.