Flexbox Generator
Sieh, was justify-content, align-items, wrap und direction mit einer Reihe von Boxen wirklich machen, und kopiere die Flex-Regeln, die genau diese Anordnung ergeben.
Browser-Tool
Dargestellt mit dem erzeugten CSS. Ändere die Fenstergröße, um den Umbruch zu prüfen.
Erzeugter Code
.flex {
display: flex;
gap: 12px;
}
Über Flexbox-Generator
Flexbox hat etwa sechs Eigenschaften, auf die es ankommt, und sie wirken auf eine Weise zusammen, die man viel leichter sieht als durchdenkt. Eine davon an einer Live-Reihe von Boxen zu ändern, bringt es dir in ein paar Minuten bei. Kostenlos, ohne Konto und vollständig online. Nichts an deinem Layout verlässt den Browser.
So nutzt du Flexbox-Generator
- Eine Richtung wählenZeile oder Spalte. Das entscheidet, auf welche Achse sich jede andere Eigenschaft bezieht, und das ist die Quelle der meisten Verwirrung.
- Entlang der Hauptachse verteilenjustify-content verteilt Elemente in die Richtung, die flex-direction festgelegt hat.
- Entlang der Querachse ausrichtenalign-items kümmert sich um die senkrechte Richtung: vertikal in einer Zeile, horizontal in einer Spalte.
- Die Regeln kopierenDie Container-Eigenschaften, die die gebaute Anordnung ergeben.
Hauptachse und Querachse
Jede Flex-Eigenschaft bezieht sich auf eine von zwei Achsen, und welche welche ist, hängt allein von flex-direction ab. In einer Zeile verläuft die Hauptachse waagerecht, justify-content schiebt Dinge also nach links und rechts; wechselst du zu column, schiebt dieselbe Eigenschaft sie nach oben und unten. Fast jeder „warum zentriert das nicht“-Moment ist eine Eigenschaft, die auf die Achse wirkt, an die du gerade nicht gedacht hast.
Was das Tool nicht kann
- Flexbox ist eindimensional. Elemente gleichzeitig in Zeilen und Spalten auszurichten, ist die Aufgabe von Grid, und wer Flex dazu zwingt, bekommt fragile Layouts.
- flex-wrap ändert das Verhalten deutlich, und align-content wirkt erst, wenn der Inhalt auf mehrere Zeilen umgebrochen ist.
Flexbox-Generator: häufige Fragen
- Wie zentriere ich etwas in beide Richtungen?
- Mit justify-content: center und align-items: center am Flex-Container. Das zentriert auf beiden Achsen, egal in welcher Richtung, und wurde deshalb die Standardantwort auf eine Frage, die CSS zwanzig Jahre lang umständlich gemacht hat.
- Warum bewirkt align-content nichts?
- Weil es nur mehrere Zeilen betrifft, und ohne flex-wrap gibt es immer nur eine. Schalte entweder den Umbruch ein oder nimm align-items, das Gegenstück für eine einzelne Zeile.
- Ist das ein Flexbox-Generator mit Drag and Drop?
- Nicht ganz: Du ordnest die Boxen mit Schaltflächen zum Hoch- und Runterschieben und einem order-Wert an, statt sie zu ziehen. Jedes Element hat außerdem eigene Einstellungen für grow, shrink, basis und align-self. Die Vorschau aktualisiert sich bei jeder Änderung, und CSS und eine HTML-Demo liegen zum Kopieren bereit.
Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.
Ähnliche Tools
Die Tools, die man zusammen mit Flexbox-Generator am häufigsten braucht.
Du findest das passende Tool nicht?
Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.