Über den CSS-Flexbox-Generator
Legen Sie die Flex-Richtung, den Justify-Content, die Align-Items, den Zeilenumbruch und die Lücke fest und kopieren Sie dann das CSS. Die Vorschau wird sofort aktualisiert, sodass Sie sehen können, wie sich die einzelnen Werte verhalten.
Wie man es benutzt
- 1Wählen Sie eine RichtungZeile, Spalte oder eine umgekehrte Variante.
- 2Ausrichtung und Umbruch festlegenSehen Sie, wie sich die drei Musterboxen bewegen.
- 3Kopieren Sie das CSSFügen Sie die Regel in Ihr Stylesheet ein.
Warum diesen css-flexbox-generator verwenden?
- Nichts verlässt Ihr Gerät. Die Arbeit geschieht in Ihrem Browser-Tab. In dieser App gibt es keinen Upload-Endpunkt, sodass Ihre Dateien und Texte von uns nicht gespeichert, protokolliert oder eingesehen werden können.
- Keine Upload-Wartezeit. Sie überspringen den Hin- und Rückweg zu einem Server vollständig. Die Ergebnisse werden durch Ihre eigene CPU begrenzt, nicht durch die Netzwerkgeschwindigkeit oder die Warteschlangengröße.
- Kostenlos, kein Konto, keine Kontingente. Keine Anmeldewand, kein Wasserzeichen, kein Tageslimit. Optionale Konten existieren nur, um Favoriten und Voreinstellungen geräteübergreifend zu speichern.
Häufig gestellte Fragen
Kann mein Layout hier sicher verwendet werden?
Ja. Dieses Tool läuft vollständig in Ihrem Browser und verwendet JavaScript. Nichts, was Sie einfügen oder öffnen, wird an einen Server gesendet und die Seite behält keine Kopie, nachdem Sie sie geschlossen haben.
Muss ich ein Konto erstellen?
Nein. Jedes Tool ist ohne Anmeldung vollständig nutzbar. Ein Konto fügt nur gespeicherte Favoriten und wiederverwendbare Voreinstellungen hinzu.
Funktioniert es auf einem Telefon?
Ja. Die Benutzeroberfläche ist „Mobile First“ mit großen Touch-Zielen und einem gestapelten Layout, sodass sie sowohl auf Telefonen und Tablets als auch auf Desktops funktioniert.
Was ist der Unterschied zwischen align-items und align-content?
align-items richtet Elemente innerhalb einer einzelnen Zeile aus. align-content verteilt mehrere umbrochene Zeilen und wird nur angewendet, wenn Flex-Wrap aktiviert ist.
Soll ich Flexbox oder Grid verwenden?
Flexbox eignet sich am besten für eindimensionale Layouts und inhaltsgesteuerte Größenanpassung. Raster eignet sich besser für zweidimensionale Layouts mit expliziten Zeilen und Spalten.