Seite wählen

Flexbox in der Praxis: ein paar einfach Beispiele

von | Jul 6, 2017 | Development

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
Florian Strohmaier
Senior UX Designer

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.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Mehr Beiträge zum Thema Development

Mein PHP-Trainingsprojekt

PHP Schulung Vor kurzem haben wir begonnen, eine neue Programmiersprache zu lernen – PHP. In der ersten Woche haben wir mit den Grundlagen wie Variablen, Arrays, Schleifen begonnen und uns schrittweise zu komplizierterer Syntax wie Funktionen, Objekten und Klassen...

check_prometheus ist jetzt öffentlich verfügbar!

Monitoring ist komplex, das wissen wir hier bei NETWAYS leider zu gut. Deswegen laufen in der Infrastruktur auch mal gerne mehrere Tools für die Überwachung. Zwei gern gesehene Kandidaten sind dabei Icinga und Prometheus. Icinga und Prometheus erfüllen...