Flexbox

Das Flexbox-Modell bietet umfangreiche Möglichkeiten, Elemente in der Höhe und Breite nach flexibel zu gestalten. Boxen lassen sich nebeneinander in Zeilen, oder untereinander in Spalten anordnen, in der Reihenfolge beliebig positionieren und aneinander ausrichten. Wenn Sie einem Element das Flexbox Modell zuweisen (mit display: flex bzw. display: inline-flex), werden Kindelemente entweder entlang der horizontalen (Hauptachse) oder vertikalen (Querachse) Achse festgelegt, abhängig von der angegebenen Richtung. Die Breite dieser Kindelemente kann mit width definiert werden, oder sie erweitern sich um den verfügbaren Raum auf Grundlage der flexiblen Länge. Das Flexbox-Modell besteht demnach aus einem Flex-Container (Elternelement) und den Flex-Items (Kindelemente) darin. Das Flexbox-Modell ist derzeit (Dezember 2015) nur in die Browser Android 4.4, Chrome, Firefox, Internet Explorer 11 und Opera implementiert, deshalb muss man proprietäre Eigenschaften verwenden; Flex-Eigenschaften sind nicht vererbbar.

Eigenschaft Bedeutung Wertzuweisung
Container-Eigenschaften
flex-flow zusammenfassende Eigenschaft flex-direction flex-wrap, initial, inherit
flex-direction Vertikale oder horizontale Richtung der Items row, row-reverse, column, column-reverse, initial, inherit
flex-wrap Zeilenumbruch / Spaltenumbruch nowrap, wrap, wrap-reverse, initial, inherit
justify-content Ausrichtung an der Hauptachse stretch, flex-start, flex-end, center, space-between, space-around, initial, inherit
align-items Vertikale bzw horizontale Ausrichtung stretch, center, flex-start, flex-end, baseline, initial, inherit
align-content Vertikale bzw horizontale Ausrichtung stretch, center, flex-start, flex-end, space-between, space-around, initial, inherit
Items-Eigenschaften
flex zusammenfassende Eigenschaft flex-grow flex-shrink flex-basis, auto, none, initial, inherit
flex-grow relativer Anteil an der Seitenbreite Zahl, initial, inherit
flex-shrink Schrumpffaktor Zahl, initial, inherit
flex-basis Basisbreite Längenangabe, Prozentwert, auto, initial, inherit
align-self Ausrichtung im Element auto, stretch, center, flex-start, flex-end, baseline, initial, inherit
order Legt Reihenfolge fest Zahl, initial, inherit

Der Flex-Container

Im Flex-Container-Element muss mit display:flex; erst einmal die gewünschte Anzeigeart bestimmt werden. Diese Eigenschaft wirkt sich auf die enthaltenen Elemente (Flex-Items) aus. Als nächstes kann man festlegen, ob die Flex-Items nebeneinander (Horizontal = Hauptachse) oder untereinander (Vertikal = Querachse)) angeordnet werden sollen. Dafür verwendet man die Eigenschaft flex-direction: row; bzw. flex-direction: column; Die Eigenschaft flex-direction kann man auch mit der Kurzschreibweise flex-flow notieren. Mit der Eigenschaft flex-flow kann man sowohl flex-direction, als auch flex-wrap schreiben. Der Standardwert für flex-flow lautet:

#container { flex-flow:row nowrap; }

Container-Eigenschaften von Flexboxen

  • display: flex oder display:inline-flex
  • flex-direction / Standardwert: flex-direction: row
  • flex-wrap / Standardwert: flex-wrap: nowrap
  • flex-flow als Zusammenfassung für flex-direction und flex-wrap
    Standardwert: flex-flow: row nowrap
  • justify-content / Standardwert: justify-content: flex-start
  • align-items / Standardwert: align-items: stretch
  • align-content / Standardwert: align-content: stretch

Flex-Items

Flex-Items (Kindelemente des Flex-Containers) werden standardmäßig in der gleichen Reihenfolge angezeigt wie sie im Quelldokument geschrieben sind. Die order-Eigenschaft kann diese Reihenfolge auch ändern. Alles, was außerhalb eines Flex-Containers und innnerhalb eines Flex-Items steht, wird wie gewohnt wiedergegeben. Mit der Eigenschaft flex kann man auch eine zusammenfassende Kurzschreibweise für flex-grow, flex-shrink und flex-basis schreiben. Der Standardwert für flex lautet:

#item { flex: 0 1 auto; }

Item-Eigenschaften von Flexboxen

  • flex-grow / Standardwert: 0
  • flex-shrink / Standardwert: 1
  • flex-basis / Standardwert: auto
  • flex als Zusammenfassung für flex-grow, flex-shrink und flex-basis
  • align-self / Standardwert: auto
  • order / Standardwert: 0

Container-Eigenschaften

Für den Flexbox-Container müssen sie auf alle Fälle display: flex, das entspricht einem Blockelement, oder display: inline-flex, das entspricht einem inline-Block-Element, notieren.

flex-flow

flex-flow ist die zusammenfassende Eigenschaft von flex-direction und flex-wrap.

flex-direction

Mit flex-direction bestimmen sie die Ausrichtung der Items. Beachten sie, dass die horizontale Ausrichtung (row) die Standardeigenschaft ist. Wenn sie also nur display:flex; schreiben, ist die Ausrichtung der enthaltenen Boxen automatisch horizontal.

Mögliche Werte für flex-direction

  • row: Ausrichtung an der Hauptachse(Standardwert)
  • row-reverse: umgekehrte Reihenfolge (von rechts nach links)
  • column: Ausrichtung an der Querachse
  • column-reverse: umgekehrte Reihenfolge (von unten nach oben)

flex-wrap

Die Eigenschaft flex-wrap legt im fest, ob sich die flexiblen Elemente an die Breite des Containers anpassen sollen, oder ihre vorgegebene Breite einhalten sollen. Mit flex-wrap:wrap wird in diesem Fall Zeilenumbruch stattfinden. Mit flex-wrap:nowrap passen sich die Items automatisch an die Containerbreite an (das ist das Flexible), allerdings nur bei horizontaler Ausrichtung. Bei vertikaler Ausrichtung wird die Höhe der Items nicht angepasst!

Mögliche Werte für flex-wrap

  • nowrap: kein Zeilenumbruch(Standardwert)
  • wrap: Zeilenumbruch wenn notwendig
  • wrap-reverse: umgekehrter Zeilenumbruch (nach oben)

Beispiel-CSS

#container {
  margin: 150px auto;
  max-width: 800px;
  height:400px;
  padding: 20px;
  display: -webkit-flex;
  display: flex;
  background-color: #594255;
  -webkit-flex-flow: row nowrap; /* Kann auch entfallen (Standardwert)*/ 
  flex-flow: row nowrap; /* Kann auch entfallen (Standardwert)*/
}

.item {
  background-color: #fff;
  width: 100px;
  height: 100px;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
}

Beispiel-HTML

<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>

Beispiel-Ausgabe

Ein horizontal orientierter Flex-Container und fünf Items mit Standardwerten.

Flex1

Beispiel-CSS

  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;

Beispiel-Ausgabe

Ein vertikal orientierter Flex-Container und fünf Items mit Spaltenumbruch.

Flex2

justify-content

Die Eigenschaft justify-content legt fest, wie die einzelnen flexiblen Elemente entlang der Hauptachse angeordnet werden.

Mögliche Werte für justify-content

  • flex-start: Ausrichtung links oben (Standardwert)
  • flex-end: Ausrichtung rechts oben bzw. links unten bei flex-direction: column
  • center: Ausrichtung zentriert oben bzw. vertikal links bei flex-direction: column
  • space-between: Ausrichtung mit gleichen Abstand nicht an den Rändern
  • space-around: Ausrichtung mit gleichen Abstand auch an den Rändern

Beispiel-CSS

  -webkit-flex-flow: row nowrap;
  -webkit-justify-content: space-around;
  flex-flow: row nowrap;
  justify-content: space-around;

Beispiel-Ausgabe

Ein horizontal orientierter Flex-Container und fünf Items mit space-around.

Flex3

Beispiel-CSS

  -webkit-flex-flow: column nowrap;
  -webkit-justify-content: center;
  flex-flow: column nowrap;
  justify-content: center;

Beispiel-Ausgabe

Ein vertikal zentrierter Flex-Container und drei Items.

Flex4

align-items

Mit align-items richten sie horizontal orientierte Boxen (direction: row) an der Querachse, vertikal orientierte Boxen (direction: column) an der Hauptachse aus. Der Standardwert von align-items ist stretch. Dieser Wert macht aber nur Sinn, wenn sie keine height bzw width-Eigenschaften im Item schreiben. Item wird dann die gesamte Höhe bzw. Breite des Containers ausfüllen.

Mögliche Werte für align-items

  • stretch: Items passen sich an die Containergröße an (Standardwert)
  • center: zentrierte Items
  • flex-start: Ausrichtung am Flex-Beginn des Containers
  • flex-end: Ausrichtung am Flex-Ende des Containers
  • baseline: Ausrichtung an der Baseline des Containers (meistens die untere Linie der ersten Textzeile)

Beispiel-CSS

  -webkit-flex-flow: row nowrap;
  -webkit-align-items: center;
  flex-flow: row nowrap;
  align-items: center;

Beispiel-Ausgabe

Ein vertikal zentrierter Flex-Container und drei Items.

Flex5

align-content

Das align-content-Eigenschaft ändert das Verhalten der Wrap-Eigenschaft. Es ist ähnlich wie die align-items-Eigenschaft, macht aber nur Sinn wenn sie mehrere Zeilen bzw. Spalten der Items erzeugen.

Mögliche Werte für align-content

  • stretch: Items passen sich an die Containergröße an (Standardwert)
  • center: zentrierte Items
  • flex-start: Ausrichtung am Flex-Beginn des Containers
  • flex-end: Ausrichtung am Flex-Ende des Containers
  • space-between: Zwischenräume zwischen Spalten bzw. Zeilen
  • space-around: Zwischenräume zwischen Spalten bzw. Zeilen und dem Containerrand

Beispiel-CSS

  -webkit-flex-flow: row wrap;
  -webkit-align-content: center;
  flex-flow: row wrap;
  align-content: center;

Beispiel-Ausgabe

Ein vertikal zentrierter Flex-Container und zehn Items.

src="CSS_Images/flex6.PNG" width="830" height="431" alt="Flex6">

Items-Eigenschaften

Items-Eigenschaften des Flexbox-Modells werden den Kindboxen des Flex-Containers zugeordnet. Diese Eigenschaften können für alle Boxen gelten, jede Box kann aber auch unterschiedliche Eigenschaften besitzen.

flex

Das flex-Element ist die zusammenfassende Eigneschaften von flex-grow, flex-shrink, flex-basis. Der Standardwert ist flex: 0 1 auto. Die Eigenschaften flex-shrink, flex-basis sind optional müssen nicht geschrieben werden.

Weitere mögliche Werte für flex

  • auto: Wert ist 1 1 auto
  • none:Wert ist 0 1 auto

flex-grow

Die flex-grow-Eigenschaft ordnet dem Item einen relativen Anteil an der Seitenbreite im Vergleich zu den anderen Items zu.

Mögliche Werte für flex-grow

  • Zahl: Wert relativ zu den Geschwisterelementen (Standardwert ist 0)

Beispiel-CSS

#container {
  margin: 150px auto;
  max-width: 800px;
  height:400px;
  padding: 20px;
  display: -webkit-flex;
  display: flex;
  background-color: #594255;
  -webkit-flex-flow: row nowrap; /* Kann auch entfallen (Standardwert)*/ 
  flex-flow: row nowrap; /* Kann auch entfallen (Standardwert)*/
}
div[id^="item"] {
  background-color: #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
}
#item1 {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
#item2 {
  -webkit-flex-grow: 2;
  flex-grow: 2;
}
#item3 {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

Beispiel-HTML

<div id="container">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
</div>

Beispiel-Ausgabe

Flex7

flex-shrink

Die flex-shrink-Eigenschaft ordnet dem Item einen relativen Schrumpffaktor im Vergleich zu den anderen Items zu.

Mögliche Werte für flex-grow

  • Zahl: Wert relativ zu den Geschwisterelementen (Standardwert ist 0)

Beispiel-CSS

div[id^="item"] {
  background-color: #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;
  -webkit-flex-basis: 300px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;  
}
#item1 {
  -webkit-flex-shrink: 3;
  flex-shrink: 3;
}

Beispiel-Ausgabe

Die Basisbreite der Items wird auf 300px gestellt, können aber im Container nicht vollstädig dargestellt werden. Den Items wird ein Schrumpffaktor 1 zugewiesen, die erste Box bekommt einen Schrumpffaktor 3. Die erste Box wird somit dreifach mehr schrumpfen wie die Geschwisterelemente.

Flex8

flex-basis

Die flex-basis-Eigenschaft ordnet dem Item eine Basis-Breite zu.

Mögliche Werte für flex-basis

  • Längenangabe
  • Prozenwert
  • auto: (Standardwert)

Beispiel-CSS

div[id^="item"] {
  background-color: #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
}
#item1 {
-webkit-flex-basis: 25%;
  flex-basis: 25%;
}
#item2 {
-webkit-flex-basis: 25%;
  flex-basis: 50%;
}
#item3 {
-webkit-flex-basis: 25%;
  flex-basis: 25%;
}

Beispiel-Ausgabe

Die Basisbreite der Items wird jeder Box einzeln zuggewiesen.
Ändern sie für dieses Beispiel die height-Eigenschaft des Containers auf height: 100px.

Flex8

align-self

Während sie mit align-items bzw. align-content Ausrichtungen aller Items bestimmen kann align-self jedem Item einzeln eine Ausrichtung zuweisen.

Mögliche Werte für align-self

  • stretch: Items passen sich an die Containergröße an
  • center: zentrierte Items
  • flex-start: Ausrichtung am Flex-Beginn des Containers
  • flex-end: Ausrichtung am Flex-Ende des Containers
  • baseline: Ausrichtung an der Baseline des Containers (meistens die untere Linie der ersten Textzeile)
  • auto: Item erbt Eigenschaften von align-items (Standardwert)

Beispiel-CSS

div[id^="item"] {
  background-color: #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
  height: 100px;
  -webkit-flex-basis: 33.3%;
  flex-basis: 33.3%;
}
#item1 {
  -webkit-flex-self: flex-end;
  align-self: flex-end;
}

Beispiel-Ausgabe

Die Basisbreite der Items wird auf 33.3% gestellt, das erste Item wird am Flex-Ende ausgerichtet.
Änbdern sie für dieses Beispiel die height-Eigenschaft des Containers auf height: 200px.

Flex10

order

Mit der order-Eigenschaft wird die Reihenfolge der Items im Dokument geändert.

Mögliche Werte für order

  • Zahl: Definiert die Reihenfolge (Standardwert ist 0)
  • -1: Verschiebt das Items an die erste Position

Beispiel-CSS

div[id^="item"] {
  background-color: #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
  height: 100px;
  -webkit-flex-basis: 33.3%;
  flex-basis: 33.3%;
}
#item1 {
  -webkit-order: 2;
  order: 2;
}
#item2 {
  -webkit-order: 3;
  order: 3;
}
#item3 {
  -webkit-order: 1;
  order: 1;
}

Beispiel-Ausgabe

Flex11