search home list

Flexbox

Das Arbeiten mit floatenden Containern kann schwierig sein. Oft muss dann der Clearfix-Hack angewendet werden. Auch absolutes positionieren ist mit dem bisherigen Box Modell nicht gerade trivial. Für komplexere Lösungen wie “Equal Height Columns” oder “Vertical Alignment” gibts es zwar JavaScript Lösungen, doch wäre es nicht schön, wenn das auch mit CSS machbar wäre?

Es ist machbar! Das “Flexible Box Layout Module” ist ein CSS Box Modell mit dem es möglich ist Flex-Container mit einer simplen Anweisung sowohl horizontal als auch vertikal zu zentrieren. Ein weiteres Feature von Flexbox ist das Source-Code-unabhängige Layouten dieser Flex-Container.

Grundlagen

Mit display: -webkit-flex; wird ein so genannter Flex Container definiert. Alle Child Elemente, die sich in so einem Flex Container befinden werden automatisch zu so genannten Flex Items. Flexbox beschreibt im Prinzip, wie diese Flex Items sich innerhalb eines Flex Containers verhalten.

Ein Flex Container kann mehrere Flex Lines haben, die die Flex Items ausrichten. Standardmäßig führen diese Linien von links nach rechts.

Flexbox - Flex Lines

Flex Items werden relativ zu den zwei Achsen Main Axis und Cross Axis ausgerichtet welche standardmäßig von links nach rechts beziehungsweise von oben nach unten führen.

Flexbox - Achsen

Layouting

Flex Items innerhalb eines Flex Containers verteilen funktioniert über die flex-grow-Property. Flex-grow gibt das Verhältnis des Raums an, den die Items einnehmen dürfen. Haben alle Flex-Items den gleichen Wert, sind alle gleich groß. Hierzu zwei Beispiele:

Beispiel 1

Im Flex Container befinden sich drei Items. A und B erhalten den Wert 1, C, den Wert 2. Das Verhältnis ist also 1:1:2. Item C bekommt die Hälfte des Platzes im Container. A und B teilen sich den restlichen Platz gleichmäßig auf.

Flexbox - Beispiel 1

codepen.io/wubbel/pen/xpEhn
Code-Beispiel kompatibel für Chrome, Safari (ab 3.1) & mobile Browser

Beispiel 2

Im Flex Container befinden sich drei Items. A und B erhalten den Wert 1, C, den Wert 2. Das Verhältnis ist jetzt 1:1:3. Item C wird größer als im vorigen Beispiel. A und B teilen sich wieder den verbleibenden Platz untereinander gleichmäßig auf.

Flexbox - Beispiel 2

codepen.io/wubbel/pen/lamky
Code-Beispiel kompatibel für Chrome, Safari (ab 3.1) & mobile Browser

Anordnen

Flex Items unabhängig vom HTML Markup anordnen ist mit der Anweisung “order” möglich. Jedes Item erhält einen Wert, der die Reihenfolge innerhalb des Flex Containers bestimmt.

Flexbox - Beispiel 3

Multi-Column Layout

Layouting von Text ist mit Flexbox vergleichbar mit diversen Office Anwendungen. Ein Flex Container kann in Spalten unterteilt werden. Diese können eine bestimmte Breite erhalten oder flexibel sein. Es ist auch Möglich die Spalten mit Trennern zu versehen sowie Items aus dem Spalten Layout ausbrechen zulassen.

codepen.io/wubbel/pen/aCqns
Code-Beispiel kompatibel für Chrome, Safari (ab 3.1) & mobile Browser

Browser-Support

Problematisch bei der Verwendung von Flexbox ist einerseits die Existenz verschiedener Spezifikationen, die sich im Syntax unterscheiden und andererseits der Browser Support. Verschiedene Browser unterstützen verschiedene Spezifikationen. Hierzu hat Chris Coyer einen interessanten Artikel veröffentlicht. Außerdem müssen für die meisten Browser Prefixe verwendet werden. Auf Can I Use erhält man Auskunft über aktuelle Supportstatus.

Properties

Folgende Liste von Properties mit beispielhaften werden soll einen Überblick über die Möglichkeiten mit Flexbox bieten.

display: flex;
Ein normaler Container wird zu einem Flex Container und alle Elemente darin zu Flex Items.
flex-direction: row;
Flex Items werden nebeneinander von links beginnend nach rechts gereiht.
flex-direction: row-reverse;
Flex Items werden nebeneinander von rechts beginnend nach links gereiht (Main Axis wurde umgedreht).
flex-direction: column;
Flex Items werden untereinander von oben beginnend gereiht (Main Axis und Cross Axis wurden getauscht).
flex-direction: column-reverse;
Flex Items werden untereinander von unten beginnend gereiht (Main Axis und Cross Axis wurden getauscht, Main Axis umgedreht).
justify-content: space-between;
Das erste Flex Item wird an den linken Rand gerückt, das letzte Flex Item an den rechten Rand, der restliche Platz im Container wird zwischen den Items verteilt.
justify-content: flex-end;
Alle Flex Items werden an den rechten Rand gerückt (Ende der Main Axis).
justify-content: center;
Alle Flex Items befinden sich in der Mitte des Flex Containers (Mitte der Main Axis).
flex-wrap: wrap;
Die Flex Items brechen innerhalb des Containers um.
flex-wrap: no-wrap;
Die Flex Items brechen aus dem Container aus.
flex-grow: [number];
Verhältnis des Platzes, den sich Flex Items untereinander aufteilen.
flex: [number] [number] auto;
Shorthand für flex-grow, flex-shrink und flex-basis
order: 1;
Weist einem Flex-Item den ersten Platz innerhalb eines Flex Containers zu.
align-self: stretch; (default)
Alle Flex Items haben die selbe Höhe.
align-self: center;
Das Flex Item wird vertikal zentriert.
align-self: flex-end;
Das Flex Item wird am unteren Rand platziert.
column-count: 3;
Definiert die Anzahl der Spalten eines Flex Containers.
column-width: 250px;
Definiert die Breite der Spalten eines Flex Containers.
columns: 250px 3;
Shorthand für column-width und column-count.
column-gap: 3em;
Gibt den Abstand zwischen den Spalten eines Flex Containers an.
column-rule-width: 2px;
Breite des Trenners zwischen zwei Spalten.
column-rule-style: dotted;
Art des Trenners zwischen zwei Spalten.
column-rule-color: #000;
Farbe des Trenners zwischen zwei Spalten.
column-rule: 2px dotted #000;
Shorthand für column-rule-width, column-rule-style und column-rule-color.
column-span: all;
Lässt ein Flex Item aus der Spaltenordnung ausbrechen.
Show all articles

2 Responses

  1. Patrick says:

    Flexbox ist eine feine Sache, vereinfacht doch vieles. Danke für die Beispiele hat mir sehr weitergeholfen!

What do you think?