.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Was ist der Flexbox Generator?
Der Flexbox Generator ist eine visuelle Spielwiese für CSS Flexible Box Layout Sie stellen die Containereigenschaften mit Schaltflächen und Schiebereglern ein, sehen Sie sich eine Live-Vorschau an, ordnen Sie die Elemente in Echtzeit neu an und kopieren Sie das genaue CSS, das die Vorschau verwendet Es entfernt das Rätselraten, wenn Sie sich merken, welche Eigenschaft was tut, sodass Sie eine Zeile, eine Spalte, ein zentriertes Layout oder ein Verpackungsraster von Karten ohne Versuch und Fehler in den Browser-Entwicklungstools erstellen können.
Flexbox ist ein eindimensionales Layoutmodell: Gegenstände werden entlang einer Hauptachse ausgelegt und auf der Querachse ausgerichtet Der Behälter treibt fast alles durch sechs Eigenschaften Flex-direction wählt die Hauptachse und ob sie vorwärts oder rückwärts verläuft Rechtfertigungsinhalt verteilt freien Raum entlang der Hauptachse Align-Items positioniert Items auf der Querachse Flex-Wrap entscheidet, ob Items auf neue Linien überlaufen, und Align-Content räumt diese Linien auseinander, sobald das Wickeln auf ist Spalt fügt gleichmäßige Abstände zwischen Items ohne Ränder hinzu.
Dieses Tool legt all diese Eigenschaften an einer Stelle offen und zeigt das Ergebnis sofort an Da die Vorschau mit den gleichen Deklarationen gerendert wird, die in der Ausgabebox erscheinen, sehen Sie genau das, was Sie erhalten, wenn Sie das CSS in Ihr Stylesheet einfügen Die generierte Regel zielt standardmäßig auf eine 'Container-Klasse ab und listet nur die Eigenschaften auf, die wichtig sind, einschließlich Align-Content nur, wenn das Umwickeln aktiviert ist, da es keine Auswirkungen auf eine einzelne Zeile hat.
Alles läuft komplett in Ihrem Browser Es gibt keine Anmeldung, es wird nichts hochgeladen, und das Tool funktioniert offline weiter, sobald die Seite geladen wurde Es ist gleichermaßen nützlich als Lernhilfe, um zu verstehen, wie die Flex-Eigenschaften interagieren und als schnelle Möglichkeit, produktionsfertiges CSS zu produzieren. Ändern Sie die Anzahl der Vorschauelemente, ändern Sie die Größe des Containers in Ihrem Kopf und lesen Sie die Deklaration ab, die die gewünschte Ausrichtung erzeugt, egal ob es sich um eine Navbar handelt, die mit einem Leerzeichen dazwischen oder um einen Heldenabschnitt handelt, der perfekt auf beiden Achsen zentriert ist.
Wie benutzt man den Flexbox Generator?
Richtung wählen und einpacken
Wählen Sie die Flex-Richtung und ob sich die Elemente auf mehrere Linien umwickeln sollen.
Ausrichtung festlegen
Passen Sie den Rechtfertigungsinhalt auf der Hauptachse an und richten Sie die Elemente auf der Querachse aus, bis die Vorschau mit Ihrem Layout übereinstimmt.
Abstandsabstand
Legen Sie die Lücke zwischen den Elementen und, wenn das Wickeln eingeschaltet ist, den Align-Inhalt fest, der die Linien voneinander trennt.
Kopieren Sie das CSS
Die generierte Regel aktualisiert sich live Kopieren Sie sie mit einem Klick und fügen Sie sie in Ihr Stylesheet ein.
Hauptmerkmale
Live-Vorschau
Ein Behälter mit Musterartikeln fliegt sofort wieder auf, wenn Sie die Eigenschaften ändern. Sie sehen also das Layout, bevor Sie Code kopieren
Jedes Container-Eigentum
Steueranzeige, Flex-Direction, Flex-Wrap, Rechtfertigungsinhalt, Align-Items, Align-Inhalt und Spalt von einem Panel
Was Sie sehen, ist das, was Sie bekommen
Die Vorschau verwendet die gleichen Deklarationen wie die Ausgabe, sodass das kopierte CSS genau das Layout auf dem Bildschirm erzeugt
Sauber, minimale Ausgabe
Die generierte Regel listet nur aussagekräftige Eigenschaften auf und lässt den Align-Inhalt weg, bis das Wickeln aktiviert ist
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!