6.4.10 CSS Flexbox – Basiskonzept
Das CSS Flexible Box Layout (kurz: Flexbox) ist eine moderne CSS-Technik, die es ermöglicht, Elemente innerhalb eines Containers flexibel anzuordnen und auszurichten. Mit Flexbox können Sie Elemente sowohl horizontal als auch vertikal verteilen und deren Größe sowie Reihenfolge per CSS steuern.
Ein bedeutender Vorteil von Flexbox ist die vereinfachte vertikale Ausrichtung von Elementen, was mit früheren Layoutmethoden oft herausfordernd war (siehe CSS Float). Flexbox arbeitet mit zwei Achsen: der Hauptachse und der Querachse. Dies ermöglicht eine flexible Gestaltung von Layouts, die sich dynamisch an verschiedene Bildschirmgrößen anpassen können.
Die Spezifikation des CSS Flexible Box Layout Module liegt beim W3C als Candidate Recommendation vor. Trotz dieses Status wird Flexbox in seiner Grundfunktionalität von allen modernen Browsern unterstützt. Laut Can I use beträgt die Unterstützung für Flexbox weltweit über 99%.
Beachten Sie, dass erste Implementierungen von Flexbox ab 2009 unterschiedliche Bezeichnungen und Eigenschaften in den Browsern aufwiesen. Beim Suchen nach Beispielen im Internet ist es daher wichtig sicherzustellen, dass diese dem aktuellen Standard entsprechen. Aktuelle Ressourcen wie der Leitfaden zur Flexbox von CSS-Tricks bieten umfassende Informationen und Beispiele zum aktuellen Stand der Flexbox-Technologie.
Basis Konzept der Flexbox – display
Eine Flexbox wird über die CSS-Eigenschaft display
aktiviert. Mit dieser Eigenschaft können Sie die Elemente wie gewohnt zwischen Block- und Inline-Verhalten unterscheiden. Innerhalb der Flexbox gelten jedoch neue Regeln: Elemente werden entlang einer Hauptachse (Main Axis) flexibel verteilt.
Basis Konzept der Flexbox – flex-direction
Die Richtung der Hauptachse wird durch flex-direction
definiert:
Wert | Richtung der Hauptachse |
---|---|
row |
Horizontal – Richtung des Elementflusses |
row-reverse |
Horizontal – entgegengesetzte Richtung |
column |
Vertikal – von oben nach unten |
column-reverse |
Vertikal – von unten nach oben |
Aber Vorsicht, denn das ist tatsächlich auch die Richtung, in der die Elemente in die Flexbox fließen. Dadurch ändert sich die Reihenfolge der Elemente in der Darstellung. Folgendes Beispiel soll dieses Verhalten einmal nachstellen.
Beispiel: Ändern der Hauptachse
Oben haben wir flex-direction: row;
und unten flex-direction: row-reverse;
Sourcecode zum Beispiel
Basis Konzept der Flexbox – order
Mit der Eigenschaft order
können Sie die Reihenfolge der inneren Elemente ändern, ohne die Reihenfolge im HTML anzupassen. Dies ist besonders nützlich für unterschiedliche Bildschirmauflösungen, um weniger wichtige Inhalte nach hinten zu verschieben.
Beispiel: Reihenfolge ändern
Sourcecode zum Beispiel
Flexbox bietet eine flexible Möglichkeit, Layouts zu erstellen. Weitere Eigenschaften wie justify-content
oder align-items
ergänzen die Funktionalität und machen Flexbox zu einer vielseitigen Lösung für moderne Layouts.