CSS mit Adi Prinz

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

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.

Beispiel-CSS

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

Beispiel-Ausgabe

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

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.

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.

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.

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.

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

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.

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.

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.

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