CSS-Flexbox-Generator
Ändere die Optionen und sieh die Elemente sich sofort bewegen. Der Code darunter zeigt nur, was du gegenüber dem Standard geändert hast.
So geht’sFlexbox, ohne Eigenschaften auswendig zu lernen
Verfügbar auf: 
CSS-Flexbox-Generator: wofür es gut ist
Flexbox ist die am meisten genutzte Art, Elemente in einer Zeile oder Spalte in CSS auszurichten, aber die Namen der Eigenschaften verwirren Einsteiger.
Hier änderst du jede Option in einer Auswahl und siehst die Elemente sofort bewegen: Richtung, Zeilenumbruch, Verteilung auf der Hauptachse, Ausrichtung auf der Querachse, align-content und Abstand zwischen Elementen. Der Code zeigt nur, was sich gegenüber dem Standard geändert hat, und warnt, wenn eine Eigenschaft mit den anderen Optionen keine Wirkung hat.
So geht’s
- Wähle die Optionen für Richtung, Ausrichtung und Umbruch.
- Passe gap, Zahl der Elemente und das wachsende Element an.
- Kopiere das CSS des Containers.
Wann nutzen
- Ein Element auf dem Bildschirm zentrieren.
- Ein Menü oder eine Reihe von Buttons bauen.
- Flexbox praktisch lernen.
Häufige Fragen
Was ist der Unterschied zwischen justify-content und align-items?
justify-content verteilt die Elemente auf der Hauptachse (horizontal, wenn die Richtung row ist) und align-items richtet auf der Querachse aus (im selben Fall vertikal). Wenn du die Richtung auf column änderst, tauschen beide die Achse.
Wann nutze ich Flexbox und wann Grid?
Flexbox ist für eine Dimension: eine Reihe von Buttons, ein Menü, Elemente, die sich je nach Platz anordnen. Grid ist für zwei Dimensionen gleichzeitig, wie eine Galerie oder das Layout der Seite. Beide lassen sich zusammen nutzen.
Wozu dient gap?
Es setzt Abstand zwischen die Elemente ohne Rand an den Kanten, was früher Margins und Selektoren wie :last-child erforderte. Es funktioniert mit Flexbox in allen aktuellen Browsern.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.