eCommerce Entwickler Blog

Der Entwickler Blog enthält verschiede Lösungsansätze für Fehler und Bug aus dem eCommerce Umfeld. Hier berichten Entwickler über ihre Erfahrungen und teilen ihre Lösungswege.

CSS Flexbox

Die meisten Fronend-Entwickler sind mit CSS Floats und Clearfix Hacks vertraut, um ein Multi-Column Layout zu gestalten. Warum Flexbox seit 2009 eine bessere Lösung ist, erkläre ich im folgenden Beitrag.

Was ist so hilfreich

Als einer der ersten CSS Module für das entwickeln eines wirklichen Layouts macht Flexbox vieles einfach oder überhaupt erst möglich. Flexbox ist ein Set von CSS Eigenschaften, die dir viele Möglichkeiten in der flexiblen Gestaltung eines Layouts geben. Mit Flexbox kannst du die Richtung, Zentrierung, Größe und Ordnung von Elementen, unabhängig von deren Originalgröße und Ordnung im HTML Code gestalten. Das alles mit nur ein paar Zeilen CSS.

Anwendungsbeispiele

Horizontales und vertikales Zentrieren

Dieses Beispiel spiegelt wohl den Heiligen Gral des Web Designs wieder, der die haarstreubende Aufgabe des vertikalen zentrieren von Elementen ins pervers Lächerliche zieht.
Man nehme: Ein Parent Element. In diesem Fall nehmen wir eine DIV Box mit dem "class" Selektor "container". Dieses Element beinhaltet eine DIV Box mit dem "class" selektor "box". Stellen wir uns nun vor, das "container" Element besitzt eine Höhe von 100% des Fensters und 100% Breite des Fensters. Das Box Element kriegt eine Höhe und Breite von 50%. Die Aufgabe besteht nun darin, das "box" Element so zu positionieren, dass es nach oben und unten, sowie nach rechts und links den gleichen Abstand aufweist. Schlussendlich geben wir dem "container" Element folgendes Styling mit auf den Weg:
 
display: flex;
justify-content: center;
align-items: center;

Das Ergebnis:

Was haben wir da gerade getan? War das wirklich so einfach? Mit 3 Zeilen CSS ein Element vertikal und horizontal zentrieren? Was sonst nur mit einer Kompination aus absolut und relativ positionierten Elementen, der Eigenschaft transform oder Tabellen Layouts möglich ist, geht dank Flexbox im Jahr 2016 super einfach!

Also was haben wir gerade gemacht?


Zuerst haben wir dem "container" Element gesagt, es möge sich bitte als flex Element definieren. Damit "initalisieren" wir sozusagen alle Funktionen der Flexbox. Erst jetzt greifen alle nachfolgenden Eigenschaften bezüglich Flexbox. Danach sagen wir dem Element mit "justify-content: center; ", dass es alle Childs horizontal mittig zu ihm ausrichten soll. Bis jetzt alles noch nichts bahnbrechendes. Allerdings können wir mit "align-items: center; " dem Element mitteilen, alle Childs auch vertikal mittig zu ihm auszurichten. Welche CSS Regel schafft das noch mit nur einer Zeile?

Flexbox dynamische Aufteilung von Breite / Höhe

Gegeben ist wieder ein "container" Element mit 100% Breite und Höhe relativ zum Fenster. Allerdings haben wir jetzt 3 Child Elemente, alle mit dem "class" selektor box. Box kriegt eine Höhe und Breite von 100% zugewiesen. Container hat wieder mal "display:flex;". Schauen wir uns das Ergebnis jetzt an:

 

Wir sehen, dass alle drei Box Elemente die gleiche Breite bekommen haben. Den gleichen Effekt könnte man z.b mit "width: 33.3333333%;" und floating erreichen. Allerdings ist float gar nicht für diese Zwecke ausgelegt (float war ursprünglich dazu entwickelt, um Text dynamisch um ein Bild zu führen). Wir sehen also bereits hier: Flexbox füllt eine große Lücke im layouten in CSS.
Erweitern wir nun das eben angesprochene Beispiel um eine realtitätsnähere Komponente: Wir weisen den beiden außenstehenden Elementen eine feste Breite zu und stellen uns vor, diese repräsentieren jetzt Sidebars. Also weisen wir den gemeinten Elementen eine Breite von 300px zu. Das übrig gebliebene Element in der Mitte soll nun den Rest des Platzes ausfüllen. Noch vor Jahren eine schwierige Aufgabe. Bringen wir also Flexbox ins Spiel.

 

 

Wir sehen, dass das Element den restlichen Platz der Seite ausgefüllt hat. Genauso wie wir es uns vorgestellt hatten. Perfekt!

Relationen

Flexboxs Lebenselexir sind Relationen. Haben wir drei Child Elemente, weist Flexbox allen die gleiche Breite zu. Alle Elemente haben die gleiche Wertigkeit und damit auch die gleiche Relation zueinander. Alle nehmen automatisch eine Flex Einheit in Anspruch.
Gehen wir nun einen Schritt tiefer und variieren diese Variabel. Vielleicht wollen wir ja unter drei Elementen eines hervorheben. Also heben wir bei diesem die Relation an. Ziehen wir dazu das bekannte Beispiel von eben heran. Ein Parent "container" mit 100% Breite und Höhe, sowie drei Child Boxen mit 100% Breite und Höhe. Darüber hinaus wird der "container" wieder mit display flex ausgestattet. Bringen wir die eben angesprochenen Relationen ins Spiel: Wir weisen den Child Boxen standartmäßig die Eigenschaft flex:1 zu. Schauen wir uns das Ergebnis an, sehen wir keinen Unterschied zum bisherigen Zustand: Drei Elemente mit gleicher Breite. Würzen wir also unser Gericht mit flex:2. Allerdings weisen wir diesmal nicht allen Boxen diesen Wert zu (das würde nichts ändern, da ja dann alle Element wieder die gleiche Realtion zu einander hätten), sondern bestücken nur die mittlere Box damit. Das Ergebnis ist eine Relation von 1:2:1. Dies bedeutet, dass das Element in der Mitte die doppelte Relation genießt, wie seine beiden Kollegen. Also 25%; 50%, 25%.

 

 

Dies also zu den Basics von Flexbox.

Nützliche Funtionen

order

Standartmäßig sind alle Childs eines Flex Parents mit mit order: 0 ausgestattet. Das bedeutet, sie folgen der Reinfolge im HTML Code. Um ein Element aus der Reihe tanzen zu lassen, setzen wir einfach den order Wert höher oder niedriger. -1 bedeutet an den Anfang, wobei 1 an das Ende bedeutet. Da wir jetzt ja bereits wissen, dass bei Flexbox sich alles um Realtionen handelt, ist auch hier anzumerken, das das nur funktioniert, wenn alle anderen Element mit 0 definiert sind. Daher macht der order Wert nur Sinn, wenn er sich von den anderen Elementen unterscheidet.

flex-direction

Eine der elementarsten Einstellungen. Hier kann ich im Parent Element festlegen, wie meine Child Elemente angeordnet sind. Standartmäßig trägt diese Eigenschaft beim instanzieren von display:flex; den Wert "row". Wie der Name schon sagt werden die Elemente nebeneinander in einer Reihe angezeigt. Dazu gibt es noch den passenden Gegenteilswert: " row-reverse". Dieser spiegelt die Reihenfolge, sodass Element 1 nun ganz hinten angezeigt wird, Element 2 eines davor usw. Interessanter wird es mit dem Wert "column". Hier wird die komplette Darstellung verändert, sodass nicht mehr die Breite, sondern die Höhe gerecht aufgeteilt wird. Das Gegenstückt ist - wer hätte es gedacht - mit " column-reverse" betitelt.

Automatische Anpassung der Höhe

Dem aufmerksamen Leser ist es vielleicht bisher schon aufgefallen. Flexbox lässt so richtig die Muskeln spielen mit einer Eigenschaft, die jedes Herz eines Frontend-Developer höher schlagen lässt. Standartmäßig setzt Flexbox die Höhe jeden Childs auf die volle Höhe des Parents. Noch nie war es unkomplizierter ein Layout mit gleich hohen Spalten, unabhängig vom Inhalt, zu gestalten. Dies war früher nur mit geschickten Workarounds durch Tabellen oder Javascript möglich. Heutzutage wird das mit purem CSS gelöst.

Eigenschaften für Angeber

Umbruch von Elementen innerhalb des Parent

Child Elemente können auch mal weniger flexibel werden, indem wir eine Mindestbreite definieren. Z.b "min-width: 400px;". Ziehen wir nun unser bekanntes Beispiel heran. Wir sehen alle 3 Child boxen sind nun 200px breit. Setzen wir passenderweise die max-width des Parent Elements auf 1200px. Was passiert nun, wenn wir an der min-width schrauben? Die Boxen bewegen sich über den Parent "container" hinüber. Diesen Effekt wollen wir natürlich unterbinden. Dies lässt sich leicht erzielen mit der Eigenschaft "flex-wrap: wrap" im Parent Element. Das Ergebnis sind umbrechende Boxen beim Erreichen der maximalen Breite des Parent Elements.

 

Ausdehnen von Childs mit fester Breite

Aufbauend auf dem letzten Punkt kann man die Child Elemente, nachdem sie umgebrochen sind, wieder flexibel ausdehnen lassen. Dazu brauchen auf alle Childs "flex:1" anzuwenden mit allen Einstellungen vom obigen Beispiel. Das Ergebnis ist eine Kombination aus Umbrüchen und trotzdem flexiblen Anpassungen der Breite.

 

Responsive Designs

Im folgenden Beispiel zeige ich, wie einfach mit Flexbox responsive Layouts kreiert werden können. Gegeben ist folgende Ausgangslage:

 

 

Das Child Element in der Mitte hat "flex:2", die Außenstehenden"flex:1". Um das ganze jetzt responsiv umzubrechen, fügen wir einen media query hinzu, der unter 480px die "flex-direction" des Parent Elements von "row" nach "column" verändern soll. Das Ergebnis ist eine einwandfrei mobile freundliche Darstellung der einzelnen Boxen.

 

Browserunterstützung

Flexbox ist endlich im 21. Jahrhundert angekommen. Das früher nur sperrlich unterstütze CSS Modul wird mittlerweile zu 94% von den Browsern unterstützt. (Stand 07/2016)

Die obere Nummer ist die erste Version, mit der Flexbox vollkommen unterstützt wurde. Die untere Nummer ist die erste Version mit der Flexbox mit dem jeweiligen Prefix unterstützt wurde.

Fazit

In diesem Beitrag habe ich dir vielfältige Möglichkeiten gezeigt, mit Flexbox umzugehen. Sei es das flexible Anpassen von Größen oder vielleicht nur das Zentrieren eines Elements. Ich bin mir sicher das du viele Wege finden wirst, Flexbox in dein Projekt zu integrieren.

Haben Sie Fragen, Wünsche oder Anregungen?
Dann können Sie uns über unser Kontaktformular kontaktieren.

Jetzt das Kontaktformular öffnen!

oder Sie erreichen uns unter der Telefonnummer: (04101) 85 86 80