CSS3 Flexbox

siehe auch A complete Guide to Flexbox

https://snuffis-web.de/code/flexbox/

Mediavent Ausrichten mit Flexbox

Mozilla Flexible Boxes

Welche Browser können Flexbox?

Mit CSS3 Flexbox wurde ein Modell geschaffen, mit dem sich viele Layoutprobleme einfach 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 |

Bilder als Flex-items
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.

display:flex / display:inline-flex

Einen Flex Container erstellt man, indem man ihm die Eigenschaft display: flex oder display: inline-flex zuweist. Der Unterschied bezieht sich auf den Flex Container. Bei flex verhält er sich wie ein Blockelement, bei inline-flex mehr wie ein Inline Element. Text neben einem inline-flex Container befindet sich auf der Baseline der Flexitems. 2 inlinie-flex Container die nebeneinander liegen erzeugen einen kleinen Zwischenraum. Das ist kein Fehler sondern ein Feature, den man auch bei anderen Inline Elementen z.B. Anker-Elemente vorfindet.

siehe Beispiel

siehe auch

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. In welcher Reihenfolge sie erscheinen hängt von vielen Eigenschaften ab. Es hängt vom Sprachraum / Writing Mode ab, ob es von links nach rechts ist oder im arbischen Sprachraum von rechts nach links geht. Desweiteren bestimmt man mit flex-direction die Reihenfolge.

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

Flexbox

row | row-reverse | column | column-reverse

flex-direction
Eigenschaft Wert Bedeutung
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.
Standardwert row
Vererbbar nein
Anwendbar display flex Elementen

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

space-around Hier hat ein Element einen Abstand an der linken Seite und an der rechten Seite. Dadurch ergibt sich, dass die Abstand am linken und rechten Rand des Containers kleiner sein kann, als zwischen den Elementen.

space-evenly bedeutet, dass alle Abstände gleich sind. Die Abstände am linken und rechten Rand des Containers und die Abstände zwischen den Elementen.

Achtung Das folgende Beispiel bezieht sich auf den Schreibmodus in englischer Sprache. Im arabischen Schreibmodes wäre es seitenverkehrt.

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
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 Die Elemente haben einen gleichen Zwischenraum am Anfang und am Ende.Daher hat das erste Element eine Einheit zur linken Containerkante, aber 2 Einheiten bis zum nächsten Element.
space-evenly Alle Elemente haben den gleichen Zwischenraum. Auch am Anfang und am Ende befindet sich dieser Zwischenraum.
Standardwert flex-start
Vererbbar nein
Anwendbar display flex Elementen

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

Flexboxlayout

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
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.
Standardwert stretch
Vererbbar nein
Anwendbar display flex Elementen

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

Flexbox Layout

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
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.
Standardwert nowrap
Vererbbar nein
Anwendbar display flex Elementen

Flex wrap mit flex-grow kombiniert

Im folgendem Beispiel werden die div Elemente im section.flexContainer nebeneinander angeordnet. Mit flex-basis wird die gewünschte Größe angegeben. Da flex-grow:1 Sie sind alle gleich breit flex:1;
Wenn das Browserfenster oder Elternelement so klein ist, dass die 3 Elemente mit einer Breite von 20rem nicht mehr nebeneinander passen, rutscht das rechte Element in die nächste Reihe flex-basis: 20rem. Diese neue Zeile wird erzeugt durch flex-wrap: wrap; Das Element in der nächsten Zeile breitet sich wieder über die gesamte Breite aus.

so sieht`s aus

  <style>
  .flexContainer{
      display:flex;
      justify-content: space-around;
      flex-wrap: wrap;
  } 
  .flexContainer div{
      flex-grow: 1;
      flex-basis: 20rem;
  }
  </style>
  
  
  <section class="flexContainer">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
       
  </section>

 

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
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.
Standardwert stretch
Vererbbar nein
Anwendbar display flex Elementen

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 hypothetische Standardgröße des Flex-Items bestimmen, sofern sie nicht anderweitig definiert wurde. Hier sind prozentuale Werte in Bezug auf den Flex Container oder absolute Werte wie px oder rem möglich.

Bei flex-direction: row bezieht flex-basis sich auf die Breite, bei flex-direction: column ist es die Höhe.

Was genau ist eine hypothetische Standardgröße und was passiert wenn man die Eigenschaft width (row) oder height (column) setzt. Auch min-width und max-width spielen hier eine Rolle.

Hier werden diese Fragen optimal erklärt The Difference between width and flex-basis

Inhalt -> width/height -> Flex-Basis (begrenzt durch max | min)

Diese Formel zeigt der Reihe nach wodurch die Größe des Flexitems bestimmt wird.
Gehen wir im folgenden Beispiel von flex-direction: row aus.

  1. Inhalt Die Breite wird zuerst durch den Inhalt bestimmt.
  2. width Setzt man eine width, wird die Breite durch diesen Wert bestimmt.
  3. flex-basis Setzt man flex-basis wird sie dadurch bestimmt und width wird überflüssig.
  4. min / max Setzt man max-width oder min-width, schränkt das flex-basis ein.

Was ist also die hypotetische Standardgröße? Man könnte sagen es ist die Größe, die ein Flex-item einnimmt, bevor es im Flexcontainer ist. Erst dann wird die Größe durch weitere Faktoren bestimmt, wie flex-shrink, flex-grow etc.

Hier ein typisches einfaches Beispiel. Die Flex-items sollen nicht kleiner werden als 210px, ansonsten in einer neuen Zeile erscheinen. Wenn mehr Platz zur Verfügung steht, sollen sie sich alle gleichmäßig vergrößern. so sieht's aus

.flexbox{display:flex;  flex-wrap: wrap}
.flexitem {flex-basis: 210px; flex-grow: 1}

Hier noch ein Beispiel so sieht's aus

Wenn die Flex-Items übereinander angeordnet sind (flex-direction: column) sieht's so aus.

Hier ein Beispiel mit img

flex-basis
Eigenschaft Wert Bedeutung
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
  0 flex-basis
Standardwert auto
Vererbbar nein
Anwendbar flex items

flex

flex ist die Kurzschreibweise für die 3 zuvor aufgeführten Eigenschaften flex-grow flex-shrink, flex-basis.

Der zweite und dritte Parameter sind optional.
Standard ist 0 1 auto

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 wird 2 mal so klein als ein 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
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.
Standardwert auto
Vererbbar nein
Anwendbar Flex-Item

Bilder als Flex-items

Bilder also img Elemente als Flexitems einzusetzen ist keine gute Idee. Gerade wenn man flex-grow, flex-shrink nutzen will, wird es schwierig das Seitenverhältnis beizubehalten.

Wenn man die Bilder in ein Html Element setzt, welches als Flex-item dient, kann man die Breite oder Höhe prozentual setzen. Siehe dazu auch meinen Tipp CSS Bilder

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 |

Weitere Beispiele Menüs

Siehe hier