Mit eine der besten Errungenschaften von CSS3 ist eine neue Layouttechnik, und zwar das „Flexbox-Layoutmodul“ auch Flexboxen oder Flexbox-Modul genannt. Durch diese wunderbare Technik müssen Layouts nicht mehr über umständliche Umwege mit floats umgesetzt werden. Floats werden jetzt nur noch benötigt, wenn man Texte um Bilder links oder rechts fließen lassen möchte, wofür sie ursprünglich auch gedacht waren. Dieses neue Layoutmodul, also die Flexboxen (oder flexible boxes) sind – wie der Name schon sagt – sehr flexibel. Sie passen sich automatisch an den zur Verfügung stehenden Platz an, was ja die Voraussetzung für responsive Webdesign, also reaktionsfähige Websites, die auf allen Ausgabegeräten optimal angezeigt werden, ist.

Weitere Vorteile des Flexbox-Moduls sind:

  • Es kann bestimmt werden was passiert, wenn sich der zur Verfügung stehende Platz ändert, indem für die einzelne Elemente ein Wachstums- und ein Schrumpffaktor festgelegt wird. Es wird also vorgegeben, in welchem Verhältnis ein Element bei geringerem Platz schrumpfen bzw. bei mehr Platz wachsen darf.
  • Mehrere gleich hohe Spalten sind ganz einfach umsetzbar. Die Elemente passen sich automatisch an das größte Element an.
  • Es kann angegeben werden, wie mit freiem Platz umgegeangen werden soll. Beispielsweise bei einer horizontalen Navigation, in der sich der Platz automatisch gleichmäßig zwischen den einzelnen Menüpunkten aufteilen soll.

Wie funktionieren Flexboxen?

Zunächst muss die Flexbox aktiviert werden, dies geschieht, indem der äußere Container (in nachfolgendem Beispiel ein Main-Element) mit „display:flex;“ ausgezeichnet wird:

Ursprungszustand (ohne aktivierter Flexbox):

noch ohne aktiver Flexbox

Zustand nach aktivierter Flexbox:

mit aktivierter Flexbox

Dieser ist jetzt der sogenannte „Flex-Container“. Alle unmittelbar nachfolgenden Elemente werden jetzt zu „Flex-Items“ und dadurch automatisch nebeneinander angeordnet. Wären in dem Flex-Container also beispielsweise drei Section-Elemente würden diese nebeneinander erscheinen und automatisch alle die gleiche Höhe haben, denn das ist die Standardeinstellung der Flexbox. Grundsätzlich kennt die Flexbox zwei Richtungen und zwar die Hauptachse und die Kreuzachse. Anhand dieser Achsen können dann weitere Einstellungen durchgeführt werden.

Achtung! Bei den hier genannten Einstellungen werden bei bestimmten Browsern teilweise Vendor-Präfixe benötigt. Mehr zur Browserkompatibilität siehe weiter unten.

Achse und Richtung bestimmen in der sich die Kind-Elemente ausdehnen sollen

Dazu gibt es die Eigenschaft flex-direction. Der darauffolgende Wert gibt an, auf welcher Achse (X- oder Y-Achse) sich die Kind-Elemente ausdehnen sollen. Diese Achse (standardmäßig die X-Achse, also horizontal) ist dann die Hauptachse, während die Y-Achse standardmäßig die Kreuzachse (auch „Nebenachse“ genannt) ist.  Mit flex-direction können Sie auch angeben, in welcher Reihenfolge sich die Flex-Items anordnen sollen (bei X-Achse von links nach rechts oder umgekehrt / bei Y-Achse: von oben nach unten oder umgekehrt). Mögliche Werte:

Bedeutung:

  • row: Standardwert. Dieser bewirkt, dass sich die Kind-Elemente in die Horizontale von links nach rechts verteilen (Hauptachse ist horizontal).

row

  • row-reverse: Kind-Elemente verteilen sich in die Horizontale von rechts nach links (Hauptachse ist horizontal).

flexbox row-reverse

  • column: Anordnung vertikal in einer Spalte also von oben nach unten (Hauptachse ist vertikal).

flexbox column

  • column-reverse: Verteilung in die Gegenrichtung also von unten nach oben (Hauptachse ist vertikal).

flexbox column-reverse

Freien Platz organisieren

Dazu gibt es die Eigenschaft justify-content. Der darauffolgende Wert bestimmt, was mit dem Leerraum zwischen den Kind-Elementen geschieht. Mögliche Werte:

Bedeutung:

  • flex-start: Standardwert. Anordnung beginnt am Anfang der Hauptachse.

flexbox flex-start

  • flex-end: Anordnung beginnt am Ende der Hauptachse.

flexbox flex-end

  • center: Anordnung im Zentrum der Hauptachse.

flexbox center

  • space-between: sorgt dafür, dass sich der freie Platz zwischen den Kind-Elementen verteilt. Das erste Element befindet sich am Anfang und das letzte Element am Ende der Hauptachse. Dazwischen befindet sich der freie Platz

flexbox space-between

  • space-around: sorgt dafür, dass sich der freie Platz gleichmäßig um die Kind-Elemente herum verteilt auch am Anfang und am Ende der Hauptachse.

flexbox space-around

Ausrichtung auf der Kreuz-/Nebenachse bestimmen

Dazu gibt es die Eigenschaft align-items. Der darauffolgende Wert gibt an, wie die Elemente auf der Kreuzachse ausgerichtet werden sollen. Mögliche Werte:

Bedeutung:

  • strech: Standardwert. Elemente werden auf die Länge der Kreuzachse gestreckt, sodass sie beispielsweise bei horizontaler X-Achse alle gleich hoch sind.
  • flex-start: Elemente sind nur so groß wie ihr jeweilige Inhalt es verlangt und werden am Anfang der Kreuzachse ausgerichtet.
  • flex-end: Elemente sind nur so groß wie ihr jeweilige Inhalt es verlangt, werden aber am Ende der Kreuzachse ausgerichtet.
  • center: Elemente stehen auf der Mitte der Kreuzachse

Reihenfolge der Kind-Elemente ändern

Ganz besonders toll beim Flexbox-Layoutmodul ist, dass man die Reihenfolge der Kind-Elemente ganz leicht beeinflussen kann. Das ist insbesondere für RWD (Responsive Webdesign) enorm hilfreich. Denn unabhängig von der Reihenfolge in der HTML-Datei können Sie über CSS für verschiedene Ausgabegeräte unterschiedliche Reihenfolgen vorgeben. Wenn beispielsweise Öffnungszeiten, Informationen zur Anfahrt, Kontaktdaten oder Ähnliches in der Desktop-Version der Website meist eher unten stehen, können diese so in der Ansicht auf mobilen Endgeräten weiter oder ganz nach oben verschoben werden. Das geschieht mit der Eigenschaft „order“.

flexbox order
Bitte beachten Sie bei dieser Funktion aber, dass die TAB-Reihenfolge der Elemente trotz der anderen visuellen Anordnung so bestehen bleibt wie im Quelltext vorgesehen! Benutzer, die die Website über die Tastatur steuern, könnten dadurch eventuell irritiert sein.

Flexible Ausdehnung der Kind-Elemente

Sie können darüber hinaus bestimmen, in welchem Verhältnis die Größe der Kind-Elemente zueinander sein soll. Haben Sie beispielsweise zwei Kind-Elemente und geben dem ersten bei der Eigenschaft „flex“ eine eins und dem 2. eine drei, dann wird der zur Verfügung stehende Platz im Verhältnis eins zu drei aufgeteilt.

flexbox flex

Browserkompatibilität

Generell werden für manche Browser Vendor-Präfixe benötigt. Unter caniuse.com kann man sich näher darüber informieren. Es gibt aber auch hier einen schönen automatischen Präfix-Generator (nicht nur für Flexboxen). Die alten Internet Explorer unterstützen das Flexbox-Layoutmodul leider nicht, hier lässt sich aber wenn man das Script modernizr.js benutzt, relativ einfach ein Fallback implementieren. Dazu in Kürze mehr!

Ausprobieren und Codegenerator für Flexboxen:

Ergänzung: 03.12.2015:

Hier ein Flexbox-Trainingsprogramm – dieses Spiel soll helfen, den Code zu erlernen:

http://flexboxfroggy.com/