Heutzutage bauen Webworker Website-Layouts mit Boxen und Floats zusammen. Dazu kommen Clearfix-Techniken oder Margin-collapse-Eigenschaften, an die sich alle gewöhnt haben. Mit Flexbox kommt ein alternatives Box-Modell hinzu. Sobald Webworker ein Element als „Flexbox“ deklarieren, kümmert sich ein neuer Layout-Algorithmus um die Darstellung. Für die Flexbox und ihre Kind-Elemente – die „Flexbox Items“ – können sie neue CSS-Eigenschaften und -Werte verwenden.

Zunächst benötigt man ein Eltern-Element, das als Flexbox dient. Die CSS-Eigenschaft „display“ legt fest, wie ein HTML-Element angezeigt wird. Häufig beschränkt sich das auf die Werte „inline“, „block“ oder „none“. Etwas unbekannter sind Werte wie „list-item“ oder „table“. Tatsächlich gibt es in CSS3 derzeit 16 mögliche Werte. Mit Flexbox kommen zwei neue hinzu: „flexbox“ und „inline-flexbox“ [1]. Da sich der aktuelle Working Draft noch im Fluss befindet, beschränkt sich dieser Artikel auf den Wert „flexbox“ und ein paar Layout-Möglichkeiten.

Die grundlegende Besonderheit einer Flexbox liegt darin, bestimmte Maße der Flexbox Items „flexibel“ zu machen. Solche Angaben kann man zum Beispiel für Höhe, Breite, Innen- oder Außenabstände der Items verwenden. Man rechnet die gewünschten Breiten und Höhen zusammen, vergleicht diese mit den zur Verfügung stehenden Maßen und verteilt dann die Differenz entsprechend. So werden Abstände zum Beispiel gleichmäßig verteilt oder Inhalte geschrumpft. Dabei kann man die flexiblen Werte auch im Verhältnis zueinander angeben, sodass man zum Beispiel drei Bilder im Verhältnis 2:1:1 darstellen kann.

Sind die Elemente passend aufeinander abgestimmt, ergeben sich einige Vereinfachungen. Zum Beispiel ist kein Clearfix mehr nötig. Webworker können die Abstände besser bestimmen und müssen nicht mehr ein margin collapse mit einbeziehen. Außerdem wachsen die Kinder einer Flexbox mit ihren Geschwistern mit. Im Beispiel hat das letzte Bild eine zweite Zeile als Bildunterschrift; die ersten beiden Elemente passen sich in der Höhe an (siehe Screenshot). Webworker können hierdurch also auf JavaScript-Lösungen verzichten, um solche Boxen auf dieselbe Breite oder Höhe zu bringen..

Die Flexbox zeigt die Elemente zunächst anhand der gewählten Richtung in der Reihenfolge der Elemente im Quelltext an. Mit der Eigenschaft „flex-order“ können Webworker die Reihenfolge aber ändern. Browser zeigen die Elemente dann aufsteigend anhand der Werte an, beginnend mit der niedrigsten Nummer. Elemente mit gleicher flex-order werden in der Reihenfolge dargestellt, in der sie im Quelltext stehen. So ist es also per CSS möglich, wichtige Bausteine an den Anfang einer Liste zu setzen. Etwa bei Blogeinträgen, die sonst per CMS als „sticky“ oder „am Anfang von Listen“ gekennzeichnet werden.

Leider ist bei der Spezifikation so einiges im Fluss. Ältere Artikel im Web beschreiben noch Eigenschaften wie „flex-box“, die im aktuellen Working Draft nicht vorkommen. Wenn eine Flexbox in einem Browser funktioniert, dann auch eher unter den Eigenschaftsnamen aus dem Working Draft von 2009. Dort hieß die Eigenschaft „flex-order“ zum Beispiel noch „box-ordinal-group“. Außerdem sind Browser-Prefixes nötig. Und – natürlich – hinkt der Internet Explorer wieder mal komplett hinterher und wird Flexbox erst ab Version 10 unterstützen. Noch ist Flexbox für Live-Projekte nicht zu verwenden, aber in Zukunft könnten Webworker ihre Layouts damit einfacher zusammensetzen.