Das Arbeiten mit floatenden Containern kann schwierig sein. Oft muss dann der Clearfix-Hack angewendet werden. Auch absolutes Positionieren ist mit dem bisherigen Box Modell nicht gerade trivial. Für komplexere Lösungen wie “Equal Height Columns” oder “Vertical Alignment” gibts es zwar JavaScript Lösungen, doch wäre es nicht schön, wenn das auch mit CSS machbar wäre?

Es ist machbar! Das “Flexible Box Layout Module” ist ein CSS Box Modell, mit dem es möglich ist, Flex-Container mit einer simplen Anweisung sowohl horizontal als auch vertikal zu zentrieren. Ein weiteres Feature von Flexbox ist das Source-Code-unabhängige Layouten dieser Flex-Container.

Grundlagen

Mit display: -webkit-flex; wird ein so genannter Flex Container definiert. Alle Child Elemente, die sich in so einem Flex Container befinden werden automatisch zu so genannten Flex Items. Flexbox beschreibt im Prinzip, wie diese Flex Items sich innerhalb eines Flex Containers verhalten.

Ein Flex Container kann mehrere Flex Lines haben, die die Flex Items ausrichten. Standardmäßig führen diese Linien von links nach rechts.

Flex Items werden relativ zu den zwei Achsen Main Axis und Cross Axis ausgerichtet, welche standardmäßig von links nach rechts beziehungsweise von oben nach unten führen.

Layouting

Flex Items innerhalb eines Flex Containers verteilen funktioniert über die flex-grow-Property. Flex-grow gibt das Verhältnis des Raums an, den die Items einnehmen dürfen. Haben alle Flex-Items den gleichen Wert, sind alle gleich groß. Hierzu zwei Beispiele:

Beispiel 1

Im Flex Container befinden sich drei Items. A und B erhalten den Wert 1, C, den Wert 2. Das Verhältnis ist also 1:1:2. Item C bekommt die Hälfte des Platzes im Container. A und B teilen sich den restlichen Platz gleichmäßig auf.

codepen.io/wubbel/pen/xpEhn
Code-Beispiel kompatibel für Chrome, Safari (ab 3.1) & mobile Browser

Beispiel 2

Im Flex Container befinden sich drei Items. A und B erhalten den Wert 1, C, den Wert 3. Das Verhältnis ist jetzt 1:1:3. Item C wird größer als im vorigen Beispiel. A und B teilen sich wieder den verbleibenden Platz untereinander gleichmäßig auf.

codepen.io/wubbel/pen/lamky
Code-Beispiel kompatibel für Chrome, Safari (ab 3.1) & mobile Browser

Anordnen

Flex Items unabhängig vom HTML Markup anordnen ist mit der Anweisung “order” möglich. Jedes Item erhält einen Wert, der die Reihenfolge innerhalb des Flex Containers bestimmt.

Multi-Column Layout

Layouting von Text ist mit Flexbox vergleichbar mit diversen Office Anwendungen. Ein Flex Container kann in Spalten unterteilt werden. Diese können eine bestimmte Breite erhalten oder flexibel sein. Es ist auch möglich, die Spalten mit Trennern zu versehen, sowie Items aus dem Spalten Layout ausbrechen zulassen.

codepen.io/wubbel/pen/aCqns
Code-Beispiel kompatibel für Chrome, Safari (ab 3.1) & mobile Browser

Browser-Support

Problematisch bei der Verwendung von Flexbox ist einerseits die Existenz verschiedener Spezifikationen, die sich im Syntax unterscheiden, und andererseits der Browser Support. Verschiedene Browser unterstützen verschiedene Spezifikationen. Hierzu hat Chris Coyer einen interessanten Artikel veröffentlicht. Außerdem müssen für die meisten Browser Prefixe verwendet werden. Auf Can I Use erhält man Auskunft über aktuelle Supportstatus.