CSS Flexbox Generator

justify-content richtet Flex-Elemente entlang der Hauptachse aus (standardmäßig horizontal), während align-items sie entlang der Querachse ausrichtet (standardmäßig vertikal). Zum Beispiel zentriert justify-content: center die Elemente horizontal, und align-items: center zentriert sie vertikal.

flex-grow bestimmt, wie sehr ein Flex-Element im Verhältnis zu seinen Geschwistern wächst, wenn zusätzlicher Platz vorhanden ist. Ein Wert von 1 bedeutet, dass das Element den gesamten verbleibenden Platz einnimmt. Wenn zwei Elemente beide flex-grow: 1 haben, wird der zusätzliche Platz gleichmäßig zwischen ihnen aufgeteilt.

Setzen Sie flex-wrap: wrap auf den Flex-Container. Standardmäßig ist flex-wrap auf nowrap eingestellt, was alle Elemente in eine Zeile zwingt. Mit wrap fließen die Elemente in eine neue Zeile, wenn der Platz nicht mehr ausreicht.

flex ist eine Abkürzung für flex-grow, flex-shrink und flex-basis zusammen. Zum Beispiel bedeutet flex: 1 1 auto, dass das Element wachsen kann, schrumpfen kann und eine automatische Basisgröße hat. flex: 1 ist eine gängige Abkürzung für flex: 1 1 0.

Fügen Sie display: flex, justify-content: center und align-items: center zum Container hinzu. Dies zentriert das Kindelement sowohl horizontal als auch vertikal. Nutzen Sie das "Centered"-Preset in diesem Generator, um dies sofort anzuwenden.

Ja. Wählen Sie ein beliebiges Element im Generator aus und passen Sie dessen order, flex-grow, flex-shrink, flex-basis und align-self unabhängig vom Rest an.

Nein. Alles passiert in Ihrem Browser. Nichts wird hochgeladen oder irgendwo gespeichert.