CSS-Flexbox-Generator

Erstellen Sie ein Flexbox-Beispiel

1. Wählen Sie Mustergröße, Schreibrichtung, Umbruch und Ausrichtung.
2. Wählen Sie jedes Element aus, um seinen Text, seine flexible Größe, sein Mindestverhalten und seine visuelle Reihenfolge zu bearbeiten.
3. Überprüfen Sie die Achsen und zeigen Sie eine Vorschau an. Kopieren Sie dann das aktuelle CSS- und HTML-Fragment oder laden Sie das vollständige Beispiel herunter.

Verstehen Sie das Beispiel

Die Hauptachse folgt im gewählten Schreibmodus der Zeile oder Spalte. Reverse-Einstellungen ändern den Anfang und das Ende; RTL ist nicht einfach ein universeller horizontaler Flip.

Die Flex-Basis ist eine anfängliche Hauptgröße, keine garantierte Endbreite. Wachstum, gewichtete Verkleinerung, Umbruch und automatische Mindestgrößen beeinflussen alle das Ergebnis des Browsers.

Quellreihenfolge-Steuerelemente ändern den HTML-Code. CSS-Reihenfolge und umgekehrte Einstellungen ändern die visuelle Anordnung, ohne die logische Lese- oder Tastaturreihenfolge zu ändern.

Das Beispiel hat feste border-box-Abmessungen, Innenabstand, Rahmen und Bildlauf. Der verfügbare Innenraum ist kleiner; Systemschriften und Bildlaufleisten können das Layout verändern.

Nützliche Experimente

Geben Sie drei Elementen positive Wachstumswerte und vergleichen Sie, wie zusätzlicher Platz geteilt wird. Ändern Sie den Text und die automatischen Mindestwerte, anstatt davon auszugehen, dass alle Flex-Elemente gleich sind.

Aktivieren Sie den Umbruch, verringern Sie die Breite des Beispiels und ändern Sie align-content. Ein nowrap-Container ignoriert die Eigenschaft; bei aktiviertem Umbruch kann sie auch bei nur einer Zeile wirken.

Vergleichen Sie LTR und RTL und versuchen Sie es dann mit vertikalem Schreiben. Lesen Sie die physischen Start- und Endbeschriftungen, anstatt davon auszugehen, dass Zeile immer von links nach rechts bedeutet.

Wissen, was erzeugt wird

Dies ist ein Beispiel für eine begrenzte Komponente mit fester Größe, kein Seitenersteller oder eine Garantie für ein responsives Design. Ihr tatsächlicher Inhalt und die umgebenden Stile erfordern eine eigene Überprüfung.

Automatische Mindestgrößen können das erwartete Schrumpfen verhindern. „Kleiner als den Inhalt zulassen“ setzt beide Mindestgrößen ausdrücklich auf null; das Tool ändert sie nicht heimlich.

„Anpassen“ ändert nur den Anzeigemaßstab. Verwenden Sie 100 % und die darin enthaltenen Bildlaufbereiche, um Details zu überprüfen. Die Parsing-Unterstützung oder eine geladene Vorschau zertifiziert nicht die Darstellung jedes Browsers.

HTML kopieren liefert ein Fragment, das auch das CSS benötigt. Der vollständige Download enthält dasselbe Dokument wie die Vorschau, mit einer kleinen Rücksetzung der Dokumentstile und einer restriktiven Ressourcenrichtlinie.

Lokales Authoring

Das Tool lädt Ihren Beispieltext und den erzeugten Code weder hoch noch speichert es sie. Kopieren und Download erfolgen nur auf Anfrage; für andere Dienste der Website gelten deren eigene Datenschutzregeln.