Flexboxen

Um das responsive Design so einfach wie möglich gestalten zu können, wurden mit CSS3 so genannte Flexboxen eingeführt. Diese haben einige Vorteile, welche das Layouten von Webseiten vereinfachen:

• Flexible Gestaltung der Boxenbreite und –höhe
• Flexible Anordnung von Boxen in Zeilen oder Spalten .
• Flexible Ausrichtung von Boxen aneinander

Dabei definiert der Webseitenentwickler nur das gewünschte Verhalten – die Positionierung von Boxen berechnet der Browser automatisch.

Basis für das Seitenlayout mit Flexboxen ist die Annahme, dass die Boxen, welche angeordnet werden sollen, in einer gemeinsamen Container-Box stehen, d.h., man geht immer von einer verschachtelten Struktur aus. Dies leitet sich auch vom "Mobile First"-Prinzip ab: zunächst werden alle Boxen für das Seitenlayout definiert, anschließend werden sie mit Inhalten gefüllt (Elemente p, ul/ol, a oder img usw.). Die Seitenlayoutboxen werden oft als Flexboxen benutzt.

Im folgenden Beispiel ist eine verschachtelte Struktur und ihr Standardaufbau im Browser dargestellt: die blau umrandete Container-Box enthält vier farblich gekennzeichnete div-Boxen. Diese werden standardmäßig im Browser nach den folgenden Regeln angeordnet:

• Sie stehen untereinander.
• Sie sind genauso breit wie ihre übergeordnete Container-Box.
• Sie sind gerade so hoch, dass ihr gesamter Inhalt reinpaßt.

Nun kann aus der Container-Box eine Flexbox gemacht werden: Flexboxen werden durch den Wert flex für die Eigenschaft display für den Container definiert:

#container {
	display: flex;
}

Bei den enthaltenen Boxen (Flex-Items) müssen keine weiteren Informationen hinterlegt werden. Der Browser berechnet standardmäßig die Breite und Höhe aller direkt enthaltenen Boxen so, dass sie

• alle nebeneinander stehen und
• die gleiche Höhe haben.

Neben der Eigenschaft display: flex; kann noch die Richtung der enthaltenen Boxen definiert werden. Dafür steht das Attribut flex-direction zur Verfügung:

flex-direction: row;

Die enthaltenen Boxen werden nebeneinander angeordnet und haben alle die gleiche Höhe. Ihre Breite richtet sich nach ihren Inhalten. Standardwert - er gilt automatisch, wenn die Eigenschaft in CSS nicht gesetzt wurde.

flex-direction: column;

Die enthaltenen Boxen werden untereinander angeordnet und haben alle die gleiche Breite. Ihre Höhe richtet sich nach ihren Inhalten.

flex-direction: row-reverse;

Wie row, allerdings werden die Boxen in der umgekehrten Reihenfolge dargestellt.

flex-direction: column-reverse;

Wie column, allerdings werden die Boxen in der umgekehrten Reihenfolge dargestellt.

Die Flex-Items werden anhand zweier Achsen ausgerichtet, der Hauptachse und der Querachse. Welche Achse damit gemeint ist, hängt vom Wert der Eigenschaft flex-direction ab:

• row oder row-reverse:
  • Die Hauptachse verläuft horizontal (x-Achse im Koordinatensystem).
  • Die Querachse verläuft vertikal (y-Achse im Koordinatensystem).
• column oder column-reverse:
  • Die Hauptachse verläuft vertikal (y-Achse im Koordinatensystem).
  • Die Querachse verläuft horizontal (x-Achse im Koordinatensystem).

Entlang dieser beiden Achsen können nun die Inhalte einer Flexbox ausgerichtet werden.

Das Attribut align-items kann folgende Werte haben (die Erläuterung im Text bezieht sich auf die Einstellung flex-direction: row;):

stretch

Ausrichtung an der oberen Kante der Container-Box; gleiche Höhe für alle enthaltenen Boxen. Standardwert - er gilt automatisch, wenn die Eigenschaft in CSS nicht gesetzt wurde.

flex-start

Ausrichtung an der oberen Kante der Container-Box; Höhe richtet sich nach dem Inhalt der jeweiligen Box

flex-end

Ausrichtung an der unteren Kante der Container-Box; Höhe richtet sich nach dem Inhalt der jeweiligen Box

center

Ausrichtung an der Mittellinie der Container-Box; Höhe richtet sich nach dem Inhalt der jeweiligen Box

Die Ausrichtung an der Querachse erfolgt mit der Eigenschaft justify-content:

Verändern Sie im obigen Beispiel das Attribut justify-content und beobachten Sie die Änderungen in der Browser-Ansicht (bei der Einstellung: flex-direction: row;):

flex-start

Ausrichtung am linken Rand der Container-Box. Standardwert - er gilt automatisch, wenn die Eigenschaft in CSS nicht gesetzt wurde.

flex-end

Ausrichtung am rechten Rand der Container-Box.

center

Ausrichtung an der vertikalen Mittellinie der Container-Box

space-between

Zwischen den Flex-Items wird gleichmäßiger Zwischenraum gelassen

space-around

Zwischen den Flex-Items sowie vor dem ersten bzw. nach dem letzten Flex-Item wird gleichmäßiger Zwischenraum gelassen

Beachten Sie: die Einstellungen machen nur Sinn, wenn die enthaltenen Boxen insgesamt nicht so breit sind wie die Containerbox, d.h., es muss noch horizontaler Platz übrig bleiben, um die Boxen horizontal ausrichten zu können.

Solten die Flex-Items sehr breit werden, ist es oft sinnvoll, sie bei schmaleren Browserfenstern teilweise auch untereinander anordnen zu können. Um dieses Verhalten zu erreichen, gibt es die Eigenschaft flex-wrap

Sie definiert einen automatischen Zeilenumbruch für Flex-Items, wenn diese insgesamt zu breit für den Container sind:

Das Attribut flex-wrap kann folgende Werte haben (bei der Einstellung: flex-direction: row;):

no-wrap

kein Zeilenumbruch. Standardwert - er gilt automatisch, wenn die Eigenschaft in CSS nicht gesetzt wurde.

wrap

Zeilenumbruch

wrap-reverse

Zeilenumbruch, wobei die Reihenfolge der Zeilen (nicht der einzelnen Flex-Items) umgedreht wird.

Wird die Eigenschaft flex-wrap: wrap oder flex-wrap: wrap-reverse gesetzt, so kann zusätzlich definiert werden, wie die vertikale Verteilung der Zeilen erfolgt.

Das Attribut align-content kann dabei folgende Werte haben:

flex-start

alle Boxen werden so weit wie möglich oben angeordnet. Standardwert - er gilt automatisch, wenn die Eigenschaft in CSS nicht gesetzt wurde

flex-end

alle Boxen werden so weit wie möglich unten angeordnet

center

der obere und untere Abstand vom Container zu den Boxen sind ungefähr gleich

space-between

zwischen den Boxenreihen wird ein gleichmäßiger Abstand gezeichnet

space-around

zwischen sowie vor und nach den Boxenreihen wird ein gleichmäßiger Abstand gezeichnet

stretch

die Boxenhöhen werden so definiert, dass keine Abstände zwischen den Boxen existieren

Mit der Eigenschaft flex-basis kann die Basisbreite der Flex-Items definiert werden. Diese Eigenschaft wird tatsächlich bei den einzelnen Flex-Items gesetzt, nicht in der Flexbox selbst.

Folgende Werte können für die Basisbreite der Flexitems gesetzt werden:

feste Angabe (z.B. Anzahl der Pixel)

Die Flex-Items haben die vorgegebene Breite. Ist die Flexbox breiter als die Summe ihrer Inhalte, bleibt die überschüssige Fläche frei.

Prozentwert

Die Breite der Flex-Items wird proportional zueinander berechnet. Die Summe der Prozentwerte der einzelnen Elemente muss nicht 100% betragen, ist sie kleiner oder größer, wird sie passend umgerechnet.

content

Die Breite der Flex-Items orientiert sich an der Breite ihres Inhalts.

auto

Breite wird flexibel angepasst (Standardwert).

Die CSS3- und HTML5-Standards werden ständig weiter entwickelt. Viele Browser-Hersteller setzen CSS-Eigenschaften auch schon in einem frühen Zustand des Standards um, noch bevor der Standard endgültig freigegeben wird. Browser setzen neue CSS-Regeln oft auch als „private“ Eigenschaften, d.h., ihre Eigenschaften werden nicht vom Standard, sondern vom Browser-Hersteller definiert.

Um solche Eigenschaften zu kennzeichnen, gibt es so genannte Browser-Präfixe. Browser-Präfixe werden für diejenigen Browser benutzt, die eine CSS-Regel experimentell bieten. Wenn eine CSS-Regel final standardisiert wurde und ein Browser diese unterstützt, kann der Browser-Präfix gelöscht werden.

Folgende Browser-Präfixe werden benutzt:

Präfix	Browser
-moz-	Firefox
-ms-	Internet Explorer
-khtml-	Konqueror
-o-	Opera (ältere Versionen)
-webkit-	Chrome, Opera (neue Versionen), Safari

Beispiel:

#container {
	display: -webkit-flex;
	display: flex;
										
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
										
	-webkit-justify-content: space-between;
	justify-content: space-between;
}