Macht Flexbox responsive Websites endlich flexibel?

Flexbox bringt Bewegung in mit HTML/CSS umgesetzte Web-Layouts – und zwar ganz ohne das Einbinden von Skripten oder andere Tricksereien. Das CSS3 Modul verspricht das von vielen Entwicklern herbeigesehnte Ende von float-basierten Layout-Lösungen, die spätestens mit dem Schritt zum responsiven Webdesign regelmäßig zu zeit- und nervenraubenden Layout-Problemen werden. Wir fassen zusammen, was Flexbox kann, wie es funktioniert und wann es reif für den Produktiveinsatz ist.

Flexibilitätsprobleme im RWD

Spätestens seit dem Durchbruch des responsive Webdesigns (RWD) haben pixelgenaue Layouts für Websites ausgedient. Inzwischen wird von einer Website oder einem Onlineshop längst ganz selbstverständlich erwartet, dass das Layout sich ganz automatisch an den “Viewport” des jeweiligen Endgeräts anpasst, so dass es auf allen Geräten – im Hoch- oder Querformat – perfekt aussieht und einfach zu bedienen ist.

In der Praxis bedeutet das für Entwickler, dass Klassen und einzelne Layoutelemente dynamische Größen erhalten und für die eigens definierten Breakpoints, an denen das Layout sich für eine andere Bildschirmgröße (etwa für Tablets oder Smartphones) verschiebt, neu angeordnet und zugeschnitten werden müssen. Das ist am Ende meist mehr Gefummel, als einem lieb sein kann und bleibt durch die von Browser zu Browser variierende Interpretation des CSS nicht selten mit immer neuen Nachbesserungen und Ausnahmeregelungen verbunden. Letztlich muss für die flexible Anordnung von Elementen immer wieder auf die Eigenschaft float zurückgegriffen werden. Mit dieser Lösung stehen aber jeweils neue Probleme ins Haus, so dass zunächst simpel konzipierte Layouts sich zu komplexen Gemengelagen auswachsen können – mitunter mit unabsehbaren Folgen und enormem Aufwand für die Bändigung der ins Schwimmen geratenen Layout-Elemente. Damit soll dank Flexbox nun ein für allemal Schluss sein.

Der Ansatz hinter Flexbox

Flexbox macht dem unsäglichen Gefloate ein Ende und stellt Frontend-Entwicklern eine schlanke Syntax bereit, mit deren Hilfe plötzlich all das einfach wird, was bislang für hartnäckige Probleme sorgte: Elementen beibringen, dass sie sich flexibel an die jeweiligen Gegebenheiten anpassen – und zwar sowohl in der Horizontalen als auch in der Vertikalen. Und das alles ohne Tricks, allein mit HTML und CSS.

Mit Flexbox soll es kein unberechenbares Verhalten von Layouts in kleineren Viewports und zum Beispiel keine ungewollten Verschiebungen und Umbrüche wegen einander ins Gehege kommender margin Eigenschaften von Elementen mehr geben. Flexbox erhebt den unbescheidenen Anspruch, das real existierende responsive Webdesign endlich auch unter der Haube so unkompliziert und elegant zu machen, wie es sich an der Oberfläche gibt.

So funktioniert Flexbox

Durch die Zuweisung der Eigenschaft display: flex zu einem Elternelement werden alle darin enthaltenen Elemente zu sogenannten Flex-Elementen. Für diese haben die berüchtigten Eigenschaften float, clear und vertical-align keinen Effekt mehr. Dafür können sie durch zwei, drei Zeilen CSS dazu gebracht werden, den zur Verfügung stehenden Raum immer gleichmäßig untereinander aufzuteilen, wobei sie sich an der Breite (flex-direction: row) oder an der Höhe orientieren (flex-direction: column). Die Reihenfolge der Anordnung lässt sich auch umkehren (flex-direction: row-reverse bzw. flex-direction: column-reverse) und kann auch individuell für die einzelnen Elemente mit Zahlenwerten für die Eigenschaft order festgelegt werden. Ebenso einfach ist die Bestimmung der Ausrichtung der Elemente nebeneinander (etwa mit justify-content: space-between) und in der Vertikalen (etwa mit align-items: stretch). Die Definition einer einzigen Eigenschaft genügt, um aus einem unruhigen Haufen von Elementen ein aufgeräumtes Layout zu machen, in dem sich die Elemente gleichmäßig über den Bildschirm verteilen, in dem zum Beispiel Spalten immer automatisch dieselbe Höhe bekommen – und das ganz ohne Rechnerei und Bastelei mit Pixeln und Prozenten.

Dass Flexbox sich im Hintergrund um die gleichmäßige Verteilung des zur Verfügung stehenden Raumes kümmert, wird umso praktischer, wenn es darum geht, das Layout und die Reihenfolge von Elementen an bestimmten Breakpoints zu ändern. Responsive Webdesign funktioniert mit Flexbox endlich so, wie es eigentlich schon immer hätte funktionieren sollen. Die genaue Funktionsweise und die technischen Details sind schon in zahlreichen Tech-Blogs erklärt und anschaulich bebildert worden. Zum Beispiel bei scotch.io gibt es einen sehr guten Überblick über die Funktionsweise von Flexbox und auf flexbox.io kann man sich die Technik in einem 20-teiligen Flexbox Videokurs aneignen. Betont nüchterne Dokumentation zu Flexbox findet sich im Mozilla Developer Network und beim World Wide Web Consortium W3C.

Die Stärken von Flexbox

Die augenfälligsten Stärken von Flexbox:

• Flexibilität der mit diesem CSS Modul umgesetzten Elemente im Frontend
• Syntax sehr ausgereift, ausgesprochen schlank und daher gut lesbar
• Grundlegende Funktionen von Flexbox sind für Frontend-Entwickler schnell und sicher zu lernen
• Auch die Details des erweiterten Funktionsumfangs sind sehr gut und mit anschaulichen Beispielen dokumentiert

Kurz: Flexbox funktioniert einfach.

Die Schwächen von Flexbox

Obwohl Flexbox als Technologie sehr ausgereift ist, gibt es ein paar kritische Punkte:

• Vollständig mit Flexbox umgesetzte komplexe Seitenlayouts können im Frontend zu einem sehr unruhigen Seitenaufbau führen – insbesondere mit umfangreichen oder aus externen Quellen geladenen Inhalten.
• Problematisch ist Flexbox jedoch im Hinblick auf die Browserkompatibilität:
  • In den älteren IE Versionen (10 und kleiner) funktioniert die Flexbox Syntax nicht, was natürlich zu indiskutablen Ergebnissen im Frontend führt.
  • Auch im Internet Explorer 11 gibt es noch zahlreiche Darstellungsfehler, wenn mit Flex-Elementen gearbeitet wird, und es müssen zudem die aktuellsten Updates installiert sein.
  • In anderen aktuellen Browsern bestehen aber keine Probleme mit Flexbox.

  Ausblick: Die Zukunft mit Flexbox

  Aktuell hat das W3C Flexbox den Status Empfehlungskandidat (Candidate Recommendation) zugewiesen. Damit dürfte es nicht mehr allzu lange dauern, bis das CSS3 Modul zum allgemeinen Kanon der Web-Technologien gehört. Noch steht dem natürlich für viele Betreiber von Websites und Shops die Barriere Internet Explorer entgegen, solange ein Teil der Besucher mit den älteren Mitgliedern dieser unbeliebten Browserfamilie unterwegs sind. Aber im Laufe der kommenden Jahre sollte dieses Problem allmählich schwinden. Wann genau der Zeitpunkt gekommen ist, den Schritt zu Flexbox zu gehen, muss für jede Website und für jeden Onlineshop ganz individuell mit einem abwägenden Blick ins Web-Controlling (z. B. Google Analytics) bestimmt werden. Nur so lässt sich sicher ausschließen, dass man wertvollen Traffic und Umsatz verliert, indem man eine nennenswerte Zahl von Nutzern mit älteren IE Browsern verprellt.