Wir schreiben das Jahr 2016 – der Flexbox-Standard ist in den Browsern angekommen. Doch wie genau funktioniert das alles, und wann lohnt sich der Einsatz? Es ist dringend an der Zeit, sich eingehender damit zu beschäftigen.

Als Tim Berners-Lee das WWW erfand, suchte er nur nach einer einfachen Oberfläche für den Austausch wissenschaftlicher Dokumente. Er konnte nicht ahnen, dass seine Erfindung sehr schnell von der werbetreibenden Industrie, von Firmen und von Privatpersonen gekapert werden würde. Die schlichten Möglichkeiten von HTML wurden in Richtung einer einfachen Gestaltung von Webseiten erweitert. Und es dauerte auch nicht lange, da wurden die ersten Tricks ausprobiert, ein wenig mehr Layout auf die neu entstehenden Webseiten zu bringen …

Wie layouten wir heute?

Doch nach all den Jahren gab es nie eine echte Layouttechnik mittels CSS, die als solche gedacht war. Wie erstellen wir denn heute unsere Layouts und gestalten die einzelnen Module? Wir nutzen Eigenschaften, die dafür meist nicht gedacht waren:

Floats
display: table
display: inline-block

Floats wurden ursprünglich in CSS integriert, um Bilder innerhalb von Absätzen nach links oder rechts fließen zu lassen; das hatte man bislang mit dem align-Attribut direkt in HTML ermöglicht. Einzig die Positionierungstechniken eröffnen planmäßig Chancen für Layout. Echtes, flexibles Seitenlayout ist damit aber nur schwer und mit zu großen Einschränkungen möglich. Wir können also zusammenfassen: Es ist 2016, wir schicken selbstfahrende Roboter auf den Mars, die Selfies nach Hause senden. Aber wir haben keine generell einsetzbare Technik, um Seiten mittels CSS zu layouten.

Das sollte sich ab etwa 2009 ändern, denn da begannen die Arbeiten am Standard für Flexbox. Dieser neue Standard sollte mit anderen parallelen Entwicklungen endlich eine echte Layoutmethode für das Web darstellen.

Flexbox ist mittlerweile in allen aktuellen Browsern implementiert und der IE unterstützt ihn bis hinunter zur Version 10. Laut Can I use kann Flexbox von gut 97 Prozent aller Browser verwendet werden [1]. Nur der IE 9 und vorherige Versionen können mit dieser Technik nichts anfangen. Doch trotz oft sehr langsamer Prozesse in den IT-Abteilungen großer Unternehmen und Behörden sollten gerade diese beiden Browser in Kürze das Zeitliche segnen. Es spricht mittlerweile also nichts mehr dagegen, Flexbox zu nutzen.

Sollten Sie noch zahlreiche Nutzer mit alten IEs haben, verwenden Sie Flexbox als Erweiterung, als progressive enhancement. Wenn die IE 9 und 8 dann endlich ausgestorben sind, haben Sie erste Erfahrungen mit Flexbox sammeln können und können die Sonderbehandlung für die alten Browser einfach entfernen.

Was ist Flexbox, und wie viele?

Flexbox ist eine neue Technik, um Layout für Seiten und deren Module zuzuweisen. Es funktioniert ebenso für die gesamte Seite wie für eine Navigation oder einen Teaser. Über die Jahre haben sich drei unterschiedliche Versionen von Flexbox angesammelt. Es ist hierbei nicht mit schlichtem Austausch von Vendor Prefixes getan; es werden meist unterschiedliche Begriffe zwischen den Versionen genutzt. Doch eine Beschäftigung mit diesen Versionen ist müßig.

Die erste Version wird nur noch von alten Android-Browsern bis Android 4.3 und dem mobilen Safari bis iOS 6.1 unterstützt. Die mittlere Version wird ausschließlich vom IE 10 verstanden; alle aktuellen Browser verstehen die aktuelle Version (Kasten „Die Unterstützung des aktuellen Standards“). Nur für einige wenige Nachzügler muss diese mit dem webkit-Präfix versehen werden:

.flexcontainer {
display: -webkit-box; /* alte Android-Browser */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex;
display: flex; 
}

Doch die unterschiedlichen Versionen und Schreibweisen sollte sich niemand merken und schreiben müssen – es gibt Tools für diese undankbare Aufgabe. Für Nutzer von Node.js-Tools bietet sich Autoprefixer [2 ] an, das es übrigens auch als Onlinetool [3] gibt. In der Onlineversion bekommt man einen guten Eindruck über die vielen Codezeilen, die das Tool dem Entwickler erspart. Für Stylus, Less und Sass gibt es zudem passende Mixins.

So funktioniert Flexbox

Flexbox basiert auf einer sauberen und schlanken HTML-Struktur. Einem Container wird mittels display: flex mitgeteilt, dass es ein Flex-Container sei. Dadurch sind dessen Kindcontainer automatisch Flex-Items. Alles zusammen nennen wir dann eine Flex-Umgebung.

In Code gegossen, sieht das in etwa so aus wie in Listing 1 dargestellt. Im CSS ist die Definition schnell erledigt:

.ich-bin-der-flexcontainer {
display: flex;
}

Und so beginnt es:

<section class="ich-bin-der-flexcontainer">
<article>Toller Inhalt</article> <!-- Flexitem -->
<article>Noch mehr toller Inhalt</article> <!-- Flexitem -->
<article>Ihr wisst schon ...</article> <!-- Flexitem -->
</section>

Leider gibt es noch immer Content-Management-Systeme – vor allem im teuren Enterprise-Bereich – die einfach von sich aus HTML um Templates packen. Diese Unart würde die Flex-Umgebung zerstören.

<div class="ich-bin-der-flexcontainer">
<div class="vom-CMS-eingefuegtes-dingens"> <!-- Flexitem -->
<div>Toller Inhalt</div> <!-- Kein Flexitem -->
<div>Noch mehr toller Inhalt</div> <!-- Kein Flexitem -->
<div>Ihr wisst schon ...</div> <!-- Kein Flexitem -->
</div>
</div>

Noch mehr Expertentipps mit unserem kostenlosen Newsletter

Keine Schlüsselwörter

Eine echte Neuerung von Flexbox ist der Verzicht auf die üblichen Schlüsselwörter für die Richtung. In einer Flex-Umgebung gibt es weder links, rechts, oben oder unten. Es gibt nur zwei Achsen und möglicherweise umgedrehte Reihenfolgen. Wir sprechen von der Hauptachse und der Kreuzachse. Die Ausrichtung beider ist unterschiedlich, je nach Leserichtung der Webseite. Denn schließlich gibt es nicht nur Webseiten, deren Inhalte von links nach rechts gelesen werden. Es gibt auch Kulturen, in denen von rechts nach links oder von oben nach unten gelesen wird.

Bleiben wir der Einfachheit halber jedoch bei der uns gewohnten Leserichtung. Für uns interpretiert der Browser standardmäßig die Hauptachse als horizontal von links nach rechts (und die Kreuzachse von oben nach unten) (Abb. 2). Als CSS-Eigenschaft übersetzt lautet das:

.flexcontainer {
flex-direction: row;
}

Wollen wir die Reihenfolge umdrehen und die Flex-Items von rechts nach links laufen lassen, dann schreiben wir flex-direction: row-reverse; (Abb. 3). In beiden Fällen ist die Kreuzachse vertikal. Wollen wir die Hauptachse vertikal haben schreiben wir:

.flexcontainer {
flex-direction: column;
}

Die umgedrehte Reihenfolge in der Vertikalen heißt dann logischerweise flex-direction: column-reverse;. Die Kreuzachse ist dann in beiden Fällen horizontal.

Diese neue Herangehensweise ist sehr gewöhnungsbedürftig, aber sie entwickelt mit der Zeit einen gewissen Charme. Wenn Sie es lange Jahre gewohnt sind, mit rechts oder links floatenden Containern zu arbeiten, kann die Umgewöhnung langwierig sein. Positiv ist, dass nun einfache und schnelle Lösungen für immer wieder auftretende Probleme zur Verfügung stehen. Philip Walton führt die bekanntesten auf seiner Seite „Solved by Flexbox“ [4] auf. Und auch der Präsentation „Fixed with Flexbox“ [5] von Matt Soria können Sie einige Anregungen entnehmen.

Reihenfolge ändern

Eine sehr charmante Eigenart von Flex-Items ist es, dass Sie ihre Reihenfolge beeinflussen können. Nehmen wir an, Sie haben vier Flex-Items und möchten gerne, dass bei der Linearisierung auf schmalen Bildschirmen das vierte an erster Stelle stehen soll, alle anderen aber in der gewohnten Reihenfolge dargestellt werden sollen. Sie erreichen dies recht einfach mit folgendem Code:

/* Die Breite ist nur ein Beispiel! */

@media screen and (max-width: 400px) {

.flex-item:nth-child(4) {
order: -1;
}
}

Die Eigenschaft order, die man den Flex-Items direkt zuweist, definiert die Reihenfolge der Darstellung. Der Standardwert ist 0. Deshalb wird ein Item mit der Ordnungsnummer -1 vor den „normalen“ Flex-Items dargestellt.

Kritisch wird die Umsortierung allerdings, wenn es sich um Links handelt. Denn alle Browser bis auf Firefox geben die Tabreihenfolge nach der visuellen Reihenfolge wieder. Egal, welcher Container mit order wohin definiert wurde, die Tabreihenfolge ist immer so, wie wir die Container im Browser sehen. Das ist in meinen Augen das zu erwartende Verhalten, denn schließlich weiß der Nutzer nichts von den zugrunde liegenden Techniken und kann sich deshalb nur optisch orientieren. Im Firefox richtet sich die Tabreihenfolge strikt nach der Reihenfolge im Quellcode. Wir können nur hoffen, dass sich dies schnellstmöglich ändert.

Wofür sollte ich Flexbox nutzen?

Flexbox eignet sich sowohl für das Seitenlayout als auch für das Layout einzelner Module. Sehr beliebt sind hierbei Bildergalerien, Navigationen und Teaser(-gruppen).

Wenn wir keine speziellen Flexbox-Eigenschaften für unser Seitenlayout nutzen wollen, lohnt sich in meinen Augen eine Abschaffung der bewährten Float Grids und -Spalten nicht. Diese Technik funktioniert und wir können mit ihr umgehen. Was wollen wir mehr?

Wollen wir hingegen einzelne Features ausnutzen, beispielsweise das automatische Strecken der Flex-Items über die Kreuzachse, dann gibt es einen guten Grund für den Einsatz von Flexbox.

Ein wichtiger Grundsatz ist in meinen Augen, keine Technik nur deshalb zu nutzen, weil sie neu ist. Wenn eine bewährte Technik bereits existiert, sollten wir diese so lange nutzen, wie es sinnvoll ist.