Flexbox (display:flex) ist eine neue Variante, um ein Grid/Raster einer Webseite aufzubauen und wird mittlerweile in vielen, aktuellen Browsern verwendet. Siehe caniuseit

Mit Flexbox wird der Floating-Ansatz abgelöst und zusätzlich kleinere Probleme behoben.

Wie wendet man Flexbox an?

Für ein Parent/Container wird die display Eigenschaft auf display:flex; gesetzt. Damit werden alle Kind-Elemente in Reihe nebeneinander dargestellt.

Alle Eigenschaften für Parent/Container:

•	flex-direction
•	justify-content
•	align-items
•	flex-wrap
•	flex-flow
•	align-content

Mit Flexbox bringt man Tabellen Eigenschaften für Divs zurück. Per Default ist flex-wrap: nowrap; aktiviert.

-> 15 Kind-Elemente werden in einer Zeile angezeigt und brechen nicht um, sofern man nichts anderes angibt.

Für Kind-Elemente kann man eine Pixel-Breite angeben, in Bezug auf responsive verwendet man i.d.R. ein Verhältnis (z.B. flex:1 2 3 etc.) oder eine Basis (z.B. flex-basis: 25%).

Alle Eigenschaften für Kind-Elemente:

•	order
•	flex
•	flex-basis
•	flex-grow
•	flex-shrink
•	align-self


Beispiel 1: Main Content mit drei Spalten

Die Reihenfolge von Elementen kann anders dargestellt werden, als sie im HTML Code vorgegeben ist (sehr praktisch für Responsive Layouts und SEO). Im HTML Code kommt der “Main Content” vor der “Left Navigation” und der “Related Spalte”.

Beispiel 1.


Beispiel 1.


Mit der Eigenschaft order:1; können wir die Reihenfolge der Kind-Elemente ändern!


Beispiel 2: Teaser/Kacheln Grid

Wir haben vier Teaser Boxen nebeneinander. Das Problem dieser Floating-Anzeige war, dass sich die einzelnen Kind- Elemente nicht nach dem höchsten Element in der Zeile ausrichten.

Zudem werden im Normalfall keine gleichbleibenden Abstände zwischen den Kind-Elementen angezeigt.

Beispiel 2.


Mit Flexbox können diese Unstimmigkeiten in der Anzeige gelöst werden. Zum einen haben die Kind-Elemente per Default immer die Höhe des höchsten Elements in einer Zeile.

Zum anderen können gleich große Abstände durch die Parent/Container Eigenschaft “justify-content:space-between” erreicht werden. So muss man mit Flexbox den Kind-Elementen nur noch eine flex-basis: 24%; geben und der Abstand zwischen allen Elementen hat dieselbe Größe. (Bei vier Spalten muss für die Basis weniger als 25% angegeben werden, damit Space zwischen den Elementen entstehen kann.)

Beispiel 2 mit Flexbox.


Beispiel 3: Center jetzt auch vertikal

Ein Element vertikal zentriert anzuzeigen, hatte so seine Tücken. Dafür hat man immer beispielsweise position:absolute oder display:table-cell und vertical-alignment:middle benötigt. Flexbox vereinfacht das Ganze um ein Vielfaches. So gibt man dem Kind-Element die Eigenschaft margin: auto auto;. Ohne Parent/Container display:flex; wurde die Kind-Element-Eigenschaft margin: auto auto; immer vom Browser ignoriert.

Beispiel 3.


Fazit: Neue CSS Techniken lösen vorhandene Probleme recht simpel und machen das Gestalten von Webseiten wieder einfacher.


Viel Spaß beim Verwenden von Flexbox!