Inzwischen wird das Flexible Box Layout (kurz FlexBox) ja soweit von Browsern unterstützt, dass es in vielen Fällen auch ruhigen Gewissens für die Produktion verwendet werden kann.

Größtenteils vereint FlexBox viele Layout-Funktionen unter einem Featureset. In erster Linie macht es bestimmte Layout-Funktionen leichter und direkter zugänglich, ohne das Markup verändern zu müssen. Dadurch lassen sich nun relativ elegant und mit wenigen CSS-Angaben viele Layout-Probleme lösen, die man eigentlich schon lange für selbstverständlich hielt.

Es gibt aber auch einige Anwendungsfälle, in denen FlexBox komplett neue Layout-Features mit reinem CSS ermöglicht. Hier nun ein paar einfache Beispiele, die Euch beim nächsten Projekt vielleicht Zeit und Nerven sparen.

 

1. Das leidige Thema mit der vertikalen Ausrichtung

Jeder, der schon mal versucht ein Layout umzusetzen, kennt in der Regel das Problem. Wie zentriere ich ein Element vertikal? Da gibt es den inline-block-Hack, der aber zum Einen sehr umständlich ist, zum Anderen leider in gewissen Fällen wegen Rundungsfehlern nicht ganz zuverlässig ist. Mit FlexBox geht es vergleichsweise einfach und es reicht, das Container-Element zu stylen.

 

2. Elemente im Container gleichmäßig verteilen

Mit FlexBox kann man einzelne Elemente in einem Container automatisch gleichmäßig so ausrichten, dass diese links und rechts bündig sind und zwar ohne zusätzliches Hilfsmarkup. Das kann bei Tabs oder Navigationsleisten sehr hilfreich sein.

 

3. Gleiche Höhe für Elemente im Container

Grid-Layouts findet man inzwischen überall. Ein klassisches Problem: Wenn die Höhe des Inhaltes variiert, sind die Elemente nicht gleich hoch. FlexBox kann hier Abhilfe schaffen, in dem es die Elemente automatisch auf die gleiche Höhe streckt.

 

Natürlich gibt es immer noch Projekte, in denen man auf FlexBox wegen fehlendem Browser-Support verzichten muss. Chrome, Firefox und Safari unterstützen die Eigenschaft schon sehr lange. Der Internet-Explorer hat ausreichenden Support seit Version 10 und beim noch jungen Edge gibt es FlexBox schon seit Beginn. Alle gängigen mobilen Browser unterstützen FlexBox bereits. Auf der sicheren Seite ist man, wenn man FlexBox ergänzend einsetzt und immer einen Fallback. Denn nicht unterstützende Browser ignorieren die FlexBox-Angaben einfach.

 

Weiterführende Links

Eine ziemlich vollständiger, sehr anschaulicher Guide für FlexBox. Zum Lernen, aber auch immer wieder spicken.

A Complete Guide to Flexbox

 

Browser-Support von FlexBox

Florian Strohmaier

Autor: Florian Strohmaier

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.