CSS3 Flexbox

meine Flexbox Video Tutorials | Mozilla Flexible Boxes | Welche Browser können Flexbox?

Mit CSS3 Flexbox wurde endlich ein tolles Modell geschaffen, mit dem sich viele Layoutprobleme lösen lassen. Es gibt einen umschließenden sogenannten Flex Container und darin liegen die Flex Items, welche in dem Flex-Container auf viele Arten angeordnet werden können. Es gibt Eigenschaften, die man dem Flex-Container zuweist und Eigenschaften für die Flex-Items.

 

Beispiel 1 | Beispiel 2 | Layout in 4 Schritten: Beispiel 1 | Beispiel 2 | Beispiel 3| Beispiel 4 |

Tricks

Struktur

Folgende Struktur liegt zugrunde. Es gibt ein Elternelement den Flex-Container, in dem sich Kindelemente befinden die Flex-Items. Text der sich direkt in einem Flex-Container befindet, wird in ein anonymes flex item zusammengefasst.

Achsen

Jedes Flexbox Layout folgt 2 Achsen. Die Flex-Items folgen der Hauptachse main axis. Diese kann entweder horizontal oder vertikal definiert werden. Im rechten Winkel dazu liegt die cross axis. Daran können die Flex-Items ausgerichtet werden.

  <style>
  #flexContainer{display:flex;} 
  #flexContainer div{flex: 1;}
  </style>
  
  
  <div id="flexContainer">
    <div>Flex Item</div>
    <div>Flex Item</div>
  </div>

Einen Flex Container erstellt man, indem man ihm die Eigenschaft display: flex zuweist. Für verschiedene Browserversionen gibt es hier verschiedene Browser Präfixe

display: flex
Eigenschaft Browser Präfix Browser Version
Standardwert flex
Vererbbar nein
Anwendbar Blockelemente
display: flex Opera 12.1, Firefox ab 20, Internet Explorer 11
-moz-box Firefox bis 19
-ms-flexbox Internet Explorer 10
-webkit-flex Chrome

 

Flex-Container

Es wird ein Flex-Container erzeugt, beispielsweise ein umschließendes div Element mit der Eigenschaft display: flex Dadurch wird der flex context für die direkten Kinder ermöglicht.

Flex-Items

Die Kinder innerhalb des Flex-Containers sind die Flex-Items. Die Kinder erscheinen standardmäßig nebeneinander in einer Reihe in der Reihenfolge, in der sie notiert sind.

so sieht's aus

Eigenschaften des Flex-Containers

flex-direction

Man kann die Reihenfolge der Flex-Items bestimmen und man kann sie in Reihen oder Spalten anordnen.
w3schools

row | row-reverse | column | column-reverse

flex-direction
Eigenschaft Wert Bedeutung
Standardwert row
Vererbbar nein
Anwendbar display flex Elementen
flex-direction row Die Flex-Items werden nebeneinander in einer Reihe aufgeführt in der Reihenfolge in der sie notiert sind.
row-reverse Die Flex-Items werden nebeneinander in einer Reihe aufgeführt in der Reihenfolge in umgekehrter Reihenfolge der sie notiert sind.
column Die Flex-Items werden in Spalten von oben nach unten aufgeführt, in der Reihenfolge in der sie notiert sind.
column-reverse Die Flex-Items werden in Spalten von oben nach unten aufgeführt, in der Reihenfolge in umgekehrter Reihenfolge in der sie notiert sind.

justify-content

Mit justify-content bestimmt man die Verteilung auf Hauptachse, wenn mehrere Flex-Items so klein sind, dass sie nicht die gesamte Breite (row) oder Höhe (column) des Flex-Containers ausfüllen.
siehe w3schools

Den horizontalen und vertikalen Beispielen liegt jeweils der gleiche HTML Markup zugrunde. Die Flex-Items haben alle eine Breite von 200 Pixeln.

horizontal
flex-start
| flex-end | center | space-between | space-around

vertikal
flex-start | flex-end | center | space-between | space-around

justify-content
Eigenschaft Wert Bedeutung
Standardwert flex-start
Vererbbar nein
Anwendbar display flex Elementen
justify-content flex-start Die Elemente werden am Startpunkt ausgerichtet.
flex-end Die Elemente werden am Ende ausgerichtet.
center Die Flex-Items werden in der Mitte der Reihe angeordnet.
space-between Das erste Element befindet sich am Startpunkt das letzte am Ende. Die anderen Elemente werden entsprechend dazwischen aufgereiht.
space-around Alle Element haben den gleichen Zwischenraum. Auch am Anfang und am Ende befindet sich dieser Zwischenraum.

align-items

Mit align-items wird die Anordnung auf der cross axis bestimmt, die im rechten Winkel zur main axis steht. Mit align-items kann man Elemente vertikal an der horizontalen Achse ausrichten, oder horizontal an der vertikalen Achse. Die Hauptachse wird mit flex-direction definiert.
siehe w3schools

In den folgenden Beispielen habe ich den Elementen eine unterschiedliche Höhe gegeben.
Achtung! align-items: stretch setzt alle Elemente auf die gleiche Höhe, sofern sie in einer Reihe angeordnet sind. Hier darf jedoch den flex-items keine Höhe zugewiesen werden.
Bei flex-direction: column ist align-items:stretch eigentlich uninteressant, da die Breite bei Blockelementen sowieso 100% ist, sofern man keine Breite zuweist.

horizontal
flex-start | flex-end | center | stretch | baseline

vertikal
flex-start | flex-end | center | stretch

align-items
Eigenschaft Wert Bedeutung
Standardwert stretch
Vererbbar nein
Anwendbar display flex Elementen
align-items flex-start Die Elemente werden an der Oberkante ausgerichtet.
flex-end Die Elemente werden an der Unterkante ausgerichtet
center Die Flex-Items werden mittig ausgerichtet.
stretch Die Flex-Items werden in der Höhe ausgedehnt. Hier darf man den Flex-items keine Höhe oder Breite zuweisen, je nach Richtung der cross-axis.
baseline Die Flex-Items werden an der Grundlinie der ersten Zeile ausgerichtet.

flex-wrap

Bei flex-direction row werden die Elemente normalerweise alle in einer Reihe angeordnet. Man kann das Verhalten ändern, so dass die Elemente auch in weiteren Reihen fortlaufen. Hier spielt die Größe der Elemente eine Rolle und die Eigenschaften für Flex-Items, wie flex-grow, flex-shrink, flex-basis oder kurz flex. Beachten Sie, dass der Wert wrap-reverse nicht die einzelnen Elemente rückwärtig laufen lässt, sondern nur die Reihen. Siehe auch w3schools

In den Beispielen wurden mehrere Zeilen eingefügt. Dadurch werden die Breiten der Div- Elemente durch die Längen der Zeilen bestimmt. Ändern Sie auch mal die Größe des Browserfensters.

nowrap | wrap | wrap-reverse

Im folgenden Beispiel habe ich allen Flex-Items eine Höhe von 40 Prozent zugewiesen. Der Flex-Container hat die Eigenschaft flex-wrap: wrap und flex-direction: column. Dadurch entstehen weitere Spalten.

wrap mit column

flex-wrap
Eigenschaft Wert Bedeutung
Standardwert nowrap
Vererbbar nein
Anwendbar display flex Elementen
flex-wrap nowrap Die Flex-Items werden in einer einzigen Reihe aufgeführt.
wrap Die Flex-Items können mehrere Reihen bilden
wrap-reverse Die Flex-Items können mehrere Reihen bilden. Die Reihen nicht die Elemente werden in umgekehrter Reihenfolge aufgeführt.

flex-flow (Kurzschreibweise)

flex-flow ist die Kurzschreibweise für die beiden oben aufgeführten Eigenschaften flex-direction und flex-wrap.
siehe w3schools

Die beiden Werte werden ohne Komma aufgeführt. Das Beispiel entspricht dem Standardverhalten.

#wrapper {flex-flow: row nowrap;}

 

align-content

align-content wird gebraucht, wenn man mehrere Zeilen und extra Freiraum hat. Die Ausrichtung bezieht sich auf Verteilung der Zeilen. Der Abstand space bezieht sich auf den vertikalen Abstand im Sinne von oben und unten. Auch center bedeutet hier mittig auf der vertikalen Achse.
siehe w3schools

flex-start | flex-end | center | space-between | space-around | stretch

align-content
Eigenschaft Wert Bedeutung
Standardwert stretch
Vererbbar nein
Anwendbar display flex Elementen
align-content flex-start Die erste Reihe beginnt oben die anderen folgen.
flex-end Die letzte Reihe wird unten angeordnet, die vorigen liegen darüber.
center Die Reihen werden vertikal mittig ausgerichtet. Oben und unten entsteht eine gleich große Lücke.
stretch Die Reihen werden vertikal so ausgedehnt, dass kein Abstand entsteht.
space-between Die erste Reihe ist oben, die letzte Reihe ist unten, weitere Reihen liegen dazwischen.
space-around Oben, unten und zwischen den Reihen entsteht ein Abstand.

Eigenschaften der Flex-Items

Die Kinder des Flex-Containers nennt man Flex-Items zu deutsch Flex Elemente. Diesen Elementen kann man einige CSS3 Eigenschaften zuweisen.

order

Standardmäßig erscheinen die Flex-Items in der Reihenfolge in der sie notiert sind. Man kann ein einzelnes Flex-Item mit der Eigenschaft order an eine andere Position verschieben. Es wird eine ganzzahlige Wertzuweisung erwartet.
siehe w3schools

flex-element {order: ganzzahlige neue Position;}

Mit folgenden Anweisungen wird die Reihenfolge der 3 Flex-Items vertauscht. Es ist nicht möglich nur eins der Elemente mittels order zu versetzen. Es findet kein automatischer Austausch statt, wenn man mittels order die Reihenfolge ändern will, muss man eine komplett neue Reihenfolge für alle Elemente eingeben.

#wrapper div:nth-child(1){order: 2;}

#wrapper div:nth-child(2){order: 3;}

#wrapper div:nth-child(3){order: 1;}

so sieht's aus

flex-grow

siehe CSS Tricks flex-grow

Mittels flex-grow kann man die einzelnen Elemente vergrößern, sofern ihre Inhalte nicht sowieso schon die gesamte Breite oder Höhe des Elternelements einnehmen würden. Bekommen alle Elemente den Wert 1 haben alle die gleiche main size und breiten sich über die gesamte Breite der Reihe aus, sofern sie in einer Reihe angeordnet sind. Wenn Sie in einer Spalte angeordnet sind flex-direction: column bekommen sie alle die gleiche Höhe. Es wird ein Zahlenwert erwartet der größer oder gleich 0 ist. Bekommen alle den Wert 1 sind sie alle gleich groß. Bekommt eins dieser Elemente den Wert 2 ist es doppelt so groß wie eines der anderen.

siehe w3schools

#container div{flex-grow: 1;}

in einer Reihe sieht's so aus | in einer Spalte sieht's so aus


Ein Element bekommt flex-grow: 2 zugewiesen, die anderen flex-grow: 1;

#container div{flex-grow: 1;}
#container div:nth-child(2){flex-grow:2;}

so sieht's aus


Wenn die Inhalte in den Flex-Items so groß sind, dass sie die ganze Reihe ausfüllen, greifen die Zahlenwerte bei flex-grow nicht mehr. so sieht's aus

Wenn man diesen Flex-Items eine Breite zuweist, greift die flex-grow Eigenschaft. Denn es bedeutet, dass ein Container bei Bedarf größer werden kann. so sieht's aus


Im folgenden Beispiel sorgt flex-grow dafür, dass Flex Items, die beim Verschieben kleiner geworden sind und dann in die nächste Reihe gerutscht sind, wieder größer werden. Schieben Sie das Browserfenster kleiner in den folgenden Beispielen.

mit flex-grow sieht's so aus | ohne flex-grow sieht's so aus


flex-shrink

siehe auch CSS Tricks flex-shrink

Mit flex-basis wird die anfängliche oder gewünschte Größe eines flex-items angegeben. Hat man mit flex-basis keine prozentuale Größe angegeben, kann es vorkommen, dass der umgebende Flex-Container zu klein ist, um die gewünschten flex-basis Größen darzustellen. In dem Fall müssen die Flex-items schrumpfen (shrink). Mit flex-shrink kann man für einem solchen Fall den flex-items ein Größenverhältnis zuweisen. Mit flex-shrink gibt man an, wie stark das Element schrumpft im Verhältnis zu den restlichen flex-items. Der Wert 2 bedeutet, es ist 2 mal so klein, oder man könnte auch sagen halb so groß wie eines der anderen.
siehe w3schools

#container div{flex-shrink: 1;}

Im folgenden Beispiel habe ich die Kurzschreibweise flex: gewählt. Die 3 Werte, die man flex zuweist bedeuten der Reihe nach flex-grow, flex-shrink, flex-basis.

item1{flex:1 1 400px;}
item2{flex:1 2 400px;}

Ich habe in dem Beispiel noch 2 Div Container eingefügt, um die Größen 400px und 800px darzustellen. Beide fex-items wollen in der basis Größe 400 Pixel dargestellt werden. Wenn der umgebende Flex Container größer ist, werden beide flex-items gleich groß dargestellt, weil sie flex-grow: 1 haben. Wenn der Flex-Container kleiner ist als 800 Pixel, also kleiner um beide flex-items mit der gewünschten Größe 400 Pixel darzustellen, tritt die Wertzuweisung von flex-shrink in Kraft. Das zweite flex-item mit flex-shrink: 2 schrumpft um den Faktor 2 und wird daher halb so groß dargestellt.

so sieht's aus , so sieht's aus

flex-basis

Mit flex-basis kann man die main size des Flex-Items bestimmen, sofern sie nicht anderweitig definiert wurde. Hier sind prozentuale Werte in Bezug auf den Flex Container oder absolute Werte wie Pixel oder Punkt möglich.
siehe w3schools
siehe Mozilla Definition

so siehts aus

Beachten Sie, dass bei einer prozentualen Angabe nur die Breite width des Flex- Items berechnet wird. Das heißt, wenn ein border padding und margin hinzukommt, müssen diese in die prozentuale Berechnung mit einbezogen werden. Eine Vereinfachung kann man mittels der CSS Eigenschaft box-sizing erreichen. Oder man wählt die Kurzschreibweise flex:1; welche bewirkt dass alle Elemente auf die gleiche Größe gesetzt werden, egal welchen Inhalt sie haben.

Im folgenden Beispiel wird flex-flow: row wrap; eingesetzt. Mit anderen Worten Reihe und Umbruch. Damit das Sinn macht, bekommen die Flex- Items Mindestbreiten mit min-width und außerdem flex-shrink: 1. Im folgenden Beispiel werden zuerst alle Flex- Items auf flex-basis: 25% gesetzt und in einem nächsten Schritt, wird eins der Elemente auf 50% gesetzt. Das überschreibt die zuvor gesetzte flex-basis Größe von 25% für dieses Element.

so sieht's aus

Wenn die Flex-Items übereinander angeordnet sind flex-direction: column siehts so aus.

flex-basis
Eigenschaft Wert Bedeutung
Standardwert auto
Vererbbar nein
Anwendbar flex items
flex-basis auto automatischer Wert wird durch den breitesten oder höchsten Inhalt des flex-items vorgegeben.
prozentualer Wert Prozentuale Größe in Bezug auf die gesamte Breite oder Höhe des Flex Containers. %
absoulter Wert absoluter Wert px oder em

flex

flex ist die Kurzschreibweise für die 3 zuvor aufgeführten Eigenschaften flex-grow, flex-shrink, flex-basis. Hiermit wird die Möglichkeit geboten die Dimensionen der Flex-Items zu definieren, um den verfügbaren Raum aufzufüllen. Flex-Items können gedehnt werden anhand der porportionalen Werte, welche man flex-grow zuweist. Wenn nicht genügend Platz im umgebenden FlexContainer zur Verfügung steht um die gewünschte Größen, die man mit flex-basis definiert darzustellen wird mit flex-shrink der Faktor angegeben, um den ein flex-item schrumpft. Der Wert 2 bedeutet es ist 2 mal so klein als eine flex-item mit Größe 1.

Setzt man flex: 1; werden alle Elemente auf die gleiche Größe gesetzt, unabhängig von ihrem Inhalt.

#container div{flex: 1;}

so sieht's aus

Flex Beispiel

Im folgenden Beispiel gibt es 3 flex-items mit folgenden flex Eigenschaften

.flex1 { flex: 3 1 200px; }
.flex2 { flex: 1 1 200px; }
.flex3 { flex: 1 2 200px; }

Wenn der umgebenden flex-container größer ist als 600 Pixel dehnen sich die flex-items anhand des ersten Wertes flex-grow. Das heißt das erste Flex-Item wird 3mal so groß als eines der anderen beiden. Sofern der Flex-Container kleiner ist als 600 Pixel, tritt jeweils der 2te Wert in Kraft. Das dritte Element wird halb so groß dargestellt als eines der anderen. Ich habe noch ein div mit Größe 600 Pixel eingefügt, damit man beim Skalieren des Browserfenster sieht, was los ist. Diese Vergrößerung und Verkleinerung findet allerdings nicht sprungartig statt, sondern nähert sich langsam an die vorgegebenen Werte an.

Achtung so sieht's aus


Mit der Kurzschreibweise flex kann man die drei Eigenschaften zusammenfassen.

flex-grow, flex-shrink, flex-basis
siehe w3schools

Standardwert ist

#container div{flex: 0 1 auto;}

so sieht's aus.


Diese 3 Wertzuweisungen bedeuten alle das gleiche:

so sieht's aus flex: auto;

so sieht's aus flex: 1 1 auto;

so sieht's aus flex-grow: 1; flex-shrink: 1; flex-basis: auto;

Weitere Werte und ihre Bedeutung:

flex
Eigenschaft Wert Bedeutung
flex auto flex: 1 1 auto;
initial flex: 0 1 auto;
none flex: 0 0 auto;
inherit erbt vom Elternelement

 

align-self

Mit align-self kann man die vorgegebene Anordnung für ein einzelnes Element übergehen. Siehe dazu auch align-items eine Eigenschaft für den Flex-Container, mit dem eine bestimmte Anordnung der Elemente definiert wird.
siehe w3schools

so sieht's aus

align-self
Eigenschaft Wert Bedeutung
Standardwert auto
Vererbbar nein
Anwendbar Flex-Item
align-self auto Das Flex-Item wird nach Vorgabe durch align-items ausgerichtet
flex-start Das Flex-Item wird an der Oberkante ausgerichtet.
flex-end Das Flex-Item wird an der Unterkante ausgerichtet
center Das Flex-Item wird mittig ausgerichtet.
stretch Das Flex-Item wird in der Höhe ausgedehnt.
baseline Das Flex-Item wird an der Grundlinie der ersten Zeile ausgerichtet.

Tricks

Flex Items zentrieren margin:auto

Etwas auf der vertikalen Achse zu zentrieren ist oft ein Problem. Flex- Items lassen sich auf beiden Achsen leicht zentrieren, auch wenn die Höhe des Flexcontainers nicht explizit mit CSS angegeben wird. Das Zauberwort heißt margin: auto

so sieht's aus

<style>
  #wrap{display:flex;}
  #wrap div{margin: auto}
</style>
  
  <div id="wrap">
  <div><h1>Big Font</h1></div>
  <div>small font</div>
  </div>
  

Layout

Inhalte auf der HTML Seite zentrieren

html {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;	
	align-items: center;
}
  

so sieht's aus
Mehr CSS ist nicht vonnöten, um Inhalte auf der Seite sowohl vertikal als auch horizontal zu zentrieren. Mittels justify-content: center, wird der Inhalt auf der main-axis zentriert und mit align-items: center wird der Inhalt auf der cross-axis zentriert. Von daher spielt es keine Rolle ob die flex-direction Ausrichtung row oder column ist. Standardwert ist aber row.

Klassisches Layout responsive Design

Siehe auch w3c

nav, aside{flex: 1 2 20%;}

article{flex:3 1 60%;}

so siehts aus.

weitere Beispiele

Header mit Logo und Navigation 4 Beispiele

Header mit Karteireitern Beispiel

Hier nochmal die Layout Beispiele vom Anfang dieser Seite.

Beispiel 1 | Beispiel 2 | Layout in 3 Schritten: Beispiel 1 | Beispiel 2 | Beispiel 3 | Beispiel 4 |