Flexbox-Generator
Richten Sie einen Flex-Container und seine Elemente mit visuellen Steuerelementen ein, sehen Sie Änderungen sofort live und kopieren Sie das CSS mit einem Klick.
Ihr Layout wird direkt in Ihrem Browser erstellt. Keine Ihrer Einstellungen wird an BroBroGo übertragen.
FAQ
Was ist der Unterschied zwischen justify-content und align-items?
Justify-content verteilt die Elemente entlang der Hauptachse – also in Verlaufsrichtung der Zeile oder Spalte –, während align-items sie entlang der Querachse positioniert. Wenn Sie die Richtung von Row auf Column ändern, werden die beiden Achsen vertauscht, sodass justify-content von oben nach unten und align-items von links nach rechts wirkt.
Wie funktionieren die Einstellungen für einzelne Elemente?
Wählen Sie ein Element anhand seiner Nummer aus und legen Sie fest, wie stark es wächst (flex-grow), um freien Platz zu füllen, wie stark es schrumpft (flex-shrink), wenn der Platz knapp wird, welche Ausgangsgröße es hat (flex-basis) und wie es sich an der Querachse ausrichtet. Mit „Order“ verschieben Sie ein Element visuell nach vorne oder hinten, ohne das HTML anzupassen. Nur Elemente, die Sie tatsächlich ändern, erhalten eine eigene CSS-Regel.
Wann spielen Wrap und align-content eine Rolle?
Wenn der Zeilenumbruch (Wrap) deaktiviert ist, werden alle Elemente in eine einzige Zeile gezwungen und können schmaler gestaucht werden. Aktivieren Sie ihn, brechen Elemente, die nicht mehr hineinpassen, in die nächste Zeile um. In diesem Fall steuert align-content die Abstände der Zeilen als Gruppe. „Gap“ definiert den Abstand zwischen Elementen und Zeilen, ganz ohne Margins.