PFAD: ./module/css/css2/

DATEI: string(25) "00Inhaltsverzeichnis2.php"
DATEI: string(21) "11Flex-Grundlagen.php"
DATEI: string(19) "12Flex-Property.php"
DATEI: string(14) "13CSS-Grid.php"
DATEI: string(20) "14Grid-Placement.php"
DATEI: string(21) "15Grid-Ausrichten.php"

css mit Adi Prinz

Eigenschaften des Flex-Containers

Die Eigenschaften des Flex-Containers bestimmen die Richtung, den Umbruch, die Verteilung und die Ausrichtung seiner direkten Kindelemente.

Sie werden am Flex-Container festgelegt und wirken sich auf die darin enthaltenen Flex-Items aus.

flex-direction

Die Eigenschaft flex-direction legt die Richtung der Hauptachse fest. Dadurch wird bestimmt, in welcher Richtung die Flex-Items innerhalb des Flex-Containers angeordnet werden. 

.flex-container {
  display: flex;
  flex-direction: row;
}
Wert Bedeutung
row Die Items werden entlang der Textrichtung nebeneinander angeordnet. Bei einer deutschen Webseite normalerweise von links nach rechts.
row-reverse Die Items werden nebeneinander, aber in umgekehrter Richtung angeordnet.
column Die Items werden untereinander angeordnet. Die Hauptachse verläuft von oben nach unten.
column-reverse Die Items werden untereinander, aber in umgekehrter Richtung angeordnet.

row

row ist der Standardwert. Die Flex-Items werden entlang der horizontalen Hauptachse angeordnet.

1
2
3
.flex-example-direction-row {
  flex-direction: row;
}

row-reverse

Mit row-reverse verläuft die Hauptachse in umgekehrter Richtung. Die visuelle Reihenfolge der Items wird dadurch umgedreht.

1
2
3
.flex-example-direction-row-reverse {
  flex-direction: row-reverse;
}

column

Mit column werden die Flex-Items untereinander angeordnet. Die Hauptachse verläuft normalerweise von oben nach unten.

1
2
3
.flex-example-direction-column {
  flex-direction: column;
}

column-reverse

Mit column-reverse werden die Items untereinander in umgekehrter Richtung angeordnet. Das erste Item erscheint dadurch unten.

1
2
3
.flex-example-direction-column-reverse {
  flex-direction: column-reverse;
}

flex-direction verändert nur die visuelle Anordnung. Die Reihenfolge der Elemente im HTML bleibt unverändert. Das ist besonders für Tastaturbedienung und Screenreader wichtig.

flex-wrap

Die Eigenschaft flex-wrap legt fest, ob die Flex-Items in einer einzigen Flexzeile bleiben oder bei Platzmangel auf mehrere Flexzeilen umgebrochen werden. 

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
Wert Bedeutung
nowrap Die Items bleiben in einer einzigen Flexzeile. Bei Platzmangel können sie verkleinert werden oder über den Container hinausragen.
wrap Die Items werden bei Platzmangel auf mehrere Flexzeilen umgebrochen.
wrap-reverse Die Items werden auf mehrere Flexzeilen umgebrochen. Die Richtung der Querachse und damit die Reihenfolge der Flexzeilen wird umgekehrt.

nowrap

nowrap ist der Standardwert. Alle Flex-Items bleiben in einer einzigen Flexzeile.

In diesem Beispiel besitzen die Items eine feste Basisbreite. Reicht der Platz nicht aus, kann horizontal gescrollt werden.

1
2
3
4
5
6
.flex-example-wrap-nowrap {
  flex-wrap: nowrap;
  overflow-x: auto;
}

wrap

Mit wrap werden die Flex-Items bei Platzmangel auf weitere Flexzeilen umgebrochen.

1
2
3
4
5
6
.flex-example-wrap-wrap {
  flex-wrap: wrap;
  align-content: flex-start;
}

wrap-reverse

Mit wrap-reverse werden die Items ebenfalls auf mehrere Flexzeilen verteilt. Die Reihenfolge der Flexzeilen entlang der Querachse wird jedoch umgekehrt.

1
2
3
4
5
6
.flex-example-wrap-reverse {
  flex-wrap: wrap-reverse;
  align-content: flex-start;
}

Ob ein Umbruch erforderlich ist, hängt von der verfügbaren Breite des Containers und von der Größe der Flex-Items ab.

flex-wrap bestimmt nur, ob und in welcher Richtung mehrere Flexzeilen entstehen. Die Verteilung dieser Zeilen im Container wird mit align-content gesteuert.

flex-flow

Die Eigenschaft flex-flow ist die Kurzschreibweise für flex-direction und flex-wrap. 

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Der erste Wert legt die Richtung der Hauptachse fest. Der zweite Wert bestimmt, ob die Flex-Items umgebrochen werden.

Schreibweise Entspricht Bedeutung
flex-flow: row nowrap flex-direction: row
flex-wrap: nowrap 		Die Items werden nebeneinander angeordnet und nicht umgebrochen.
flex-flow: row wrap flex-direction: row
flex-wrap: wrap 		Die Items werden nebeneinander angeordnet und bei Platzmangel umgebrochen.
flex-flow: row-reverse wrap flex-direction: row-reverse
flex-wrap: wrap 		Die Hauptachse verläuft in umgekehrter Richtung. Bei Platzmangel entstehen mehrere Flexzeilen.
flex-flow: column nowrap flex-direction: column
flex-wrap: nowrap 		Die Items werden untereinander in einer einzigen Flexspalte angeordnet.
flex-flow: column wrap flex-direction: column
flex-wrap: wrap 		Die Items werden untereinander angeordnet und bei Platzmangel in weitere Flexspalten umgebrochen.
flex-flow: column-reverse wrap flex-direction: column-reverse
flex-wrap: wrap 		Die Spaltenrichtung wird umgekehrt. Bei Platzmangel entstehen weitere Flexspalten.

row nowrap

Die Items werden von links nach rechts in einer einzigen Flexzeile angeordnet. Ein Umbruch ist nicht erlaubt.

1
2
3
4
5
6
.flex-example-flow-row-nowrap {
  flex-flow: row nowrap;
  overflow-x: auto;
}

row wrap

Die Items werden nebeneinander angeordnet und bei Platzmangel auf weitere Flexzeilen umgebrochen.

1
2
3
4
5
6
.flex-example-flow-row-wrap {
  flex-flow: row wrap;
}

row-reverse wrap

Die Items werden in umgekehrter Zeilenrichtung angeordnet und bei Platzmangel umgebrochen.

1
2
3
4
5
6
.flex-example-flow-row-reverse-wrap {
  flex-flow: row-reverse wrap;
}

column nowrap

Die Items werden von oben nach unten in einer einzigen Flexspalte angeordnet.

1
2
3
4
5
6
.flex-example-flow-column-nowrap {
  flex-flow: column nowrap;
  overflow-y: auto;
}

column wrap

Die Items werden untereinander angeordnet. Wenn die Höhe des Containers nicht ausreicht, entstehen weitere Flexspalten.

1
2
3
4
5
6
.flex-example-flow-column-wrap {
  flex-flow: column wrap;
}

column-reverse wrap

Die Items werden in umgekehrter Spaltenrichtung angeordnet. Bei Platzmangel entstehen weitere Flexspalten.

1
2
3
4
5
6
.flex-example-flow-column-reverse-wrap {
  flex-flow: column-reverse wrap;
}

Wird nur ein Wert angegeben, erkennt der Browser anhand des Wertes, ob damit flex-direction oder flex-wrap gemeint ist. Für eine verständliche Schreibweise sollten in Lernbeispielen beide Werte angegeben werden.

justify-content

Die Eigenschaft justify-content richtet die Flex-Items entlang der Hauptachse aus und verteilt den verfügbaren freien Platz.

Die Richtung der Hauptachse wird durch flex-direction bestimmt. Bei row verläuft sie normalerweise horizontal, bei column vertikal. 

.flex-container {
  display: flex;
  justify-content: center;
}
Wert Bedeutung
normal Verwendet die normale Ausrichtung. Bei Flexbox wirkt dieser Wert grundsätzlich wie flex-start.
flex-start Die Items werden am Anfang der Hauptachse angeordnet.
flex-end Die Items werden am Ende der Hauptachse angeordnet.
center Die Items werden als Gruppe entlang der Hauptachse zentriert.
space-between Das erste Item liegt am Anfang und das letzte am Ende. Der freie Platz wird gleichmäßig zwischen den Items verteilt.
space-around Um jedes Item wird gleich viel Platz verteilt. Die äußeren Abstände sind halb so groß wie die Abstände zwischen den Items.
space-evenly Die Abstände zwischen den Items und zu den Rändern sind gleich groß.

normal

Bei Flexbox entspricht normal grundsätzlich der Anordnung am Anfang der Hauptachse.

1
2
3
.flex-example-justify-normal {
  justify-content: normal;
}

flex-start

Die Items werden am Anfang der Hauptachse angeordnet.

1
2
3
.flex-example-justify-start {
  justify-content: flex-start;
}

flex-end

Die Items werden am Ende der Hauptachse angeordnet.

1
2
3
.flex-example-justify-end {
  justify-content: flex-end;
}

center

Die Items werden als zusammenhängende Gruppe zentriert.

1
2
3
.flex-example-justify-center {
  justify-content: center;
}

space-between

Das erste Item liegt am Anfang und das letzte am Ende. Der freie Platz wird nur zwischen den Items verteilt.

1
2
3
.flex-example-justify-space-between {
  justify-content: space-between;
}

space-around

Um jedes Item wird gleich viel Platz verteilt. Dadurch sind die äußeren Abstände halb so groß wie die Abstände zwischen den Items.

1
2
3
.flex-example-justify-space-around {
  justify-content: space-around;
}

space-evenly

Sämtliche Abstände zwischen den Items und zu den Rändern sind gleich groß.

1
2
3
.flex-example-justify-space-evenly {
  justify-content: space-evenly;
}

justify-content verteilt nur tatsächlich vorhandenen freien Platz. Wenn die Flex-Items den Container bereits vollständig ausfüllen, ist möglicherweise kein Unterschied zwischen den Werten sichtbar.

align-items

Die Eigenschaft align-items richtet alle Flex-Items innerhalb ihrer jeweiligen Flexzeile entlang der Querachse aus.

Bei flex-direction: row verläuft die Querachse normalerweise vertikal. Bei flex-direction: column verläuft sie normalerweise horizontal. 

.flex-container {
  display: flex;
  align-items: center;
}
Wert Bedeutung
normal Verwendet die normale Ausrichtung. Bei Flexbox verhält sich dieser Wert grundsätzlich wie stretch.
stretch Items ohne festgelegte Größe entlang der Querachse werden gestreckt.
flex-start Die Items werden am Anfang der Querachse angeordnet.
flex-end Die Items werden am Ende der Querachse angeordnet.
center Die Items werden entlang der Querachse zentriert.
baseline Die Items werden an der Grundlinie ihres Textes ausgerichtet.

normal

Bei Flexbox wirkt normal grundsätzlich wie stretch.

1
2
3
.flex-example-align-items-normal {
  align-items: normal;
}

stretch

stretch ist der Standardwert. Items ohne feste Höhe werden entlang der Querachse über die verfügbare Höhe der Flexzeile gestreckt.

1
2
3
.flex-example-align-items-stretch {
  align-items: stretch;
}

flex-start

Die Items werden am Anfang der Querachse angeordnet.

1
2
3
.flex-example-align-items-start {
  align-items: flex-start;
}

flex-end

Die Items werden am Ende der Querachse angeordnet.

1
2
3
.flex-example-align-items-end {
  align-items: flex-end;
}

center

Die Items werden entlang der Querachse zentriert.

1
2
3
.flex-example-align-items-center {
  align-items: center;
}

baseline

Die Items werden an der Grundlinie ihres Textes ausgerichtet. Durch die unterschiedlichen Schriftgrößen ist die Wirkung gut sichtbar.

klein
mittel
groß
.flex-example-align-items-baseline {
  align-items: baseline;
}

align-items gilt gemeinsam für alle Items des Flex-Containers. Soll nur ein einzelnes Flex-Item abweichend ausgerichtet werden, wird dafür align-self verwendet.

align-content

Die Eigenschaft align-content richtet mehrere Flexzeilen entlang der Querachse aus und verteilt den verfügbaren freien Platz zwischen diesen Zeilen.

Damit align-content sichtbar wirkt, müssen mehrere Flexzeilen vorhanden sein. Der Flex-Container benötigt daher flex-wrap: wrap und ausreichend Platz entlang der Querachse. 

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
Wert Bedeutung
normal Verwendet die normale Verteilung. Bei Flexbox verhält sich dieser Wert grundsätzlich wie stretch.
stretch Die Flexzeilen werden entlang der Querachse gestreckt, sodass sie den verfügbaren Platz ausfüllen.
flex-start Die Flexzeilen werden am Anfang der Querachse angeordnet.
flex-end Die Flexzeilen werden am Ende der Querachse angeordnet.
center Die Flexzeilen werden als Gruppe entlang der Querachse zentriert.
space-between Die erste Flexzeile liegt am Anfang und die letzte am Ende. Der freie Platz wird zwischen den Flexzeilen verteilt.
space-around Um jede Flexzeile wird gleich viel Platz verteilt. Die äußeren Abstände sind halb so groß wie die Abstände zwischen den Zeilen.
space-evenly Die Abstände zwischen den Flexzeilen und zu den Rändern sind gleich groß.

normal

Bei Flexbox wirkt normal grundsätzlich wie stretch. Der freie Platz wird auf die Flexzeilen verteilt.

1
2
3
4
5
6
.flex-example-align-content-normal {
  align-content: normal;
}

stretch

Mit stretch werden die Flexzeilen entlang der Querachse gestreckt, sodass sie den verfügbaren Platz ausfüllen.

1
2
3
4
5
6
.flex-example-align-content-stretch {
  align-content: stretch;
}

flex-start

Die Flexzeilen werden am Anfang der Querachse angeordnet.

1
2
3
4
5
6
.flex-example-align-content-start {
  align-content: flex-start;
}

flex-end

Die Flexzeilen werden am Ende der Querachse angeordnet.

1
2
3
4
5
6
.flex-example-align-content-end {
  align-content: flex-end;
}

center

Die Flexzeilen werden als zusammenhängende Gruppe entlang der Querachse zentriert.

1
2
3
4
5
6
.flex-example-align-content-center {
  align-content: center;
}

space-between

Die erste Flexzeile liegt am Anfang und die letzte am Ende der Querachse. Der freie Platz wird nur zwischen den Zeilen verteilt.

1
2
3
4
5
6
.flex-example-align-content-space-between {
  align-content: space-between;
}

space-around

Um jede Flexzeile wird gleich viel Platz verteilt. Dadurch sind die äußeren Abstände halb so groß wie die Abstände zwischen den Zeilen.

1
2
3
4
5
6
.flex-example-align-content-space-around {
  align-content: space-around;
}

space-evenly

Die Abstände zwischen den Flexzeilen und zu den Rändern des Containers sind gleich groß.

1
2
3
4
5
6
.flex-example-align-content-space-evenly {
  align-content: space-evenly;
}

align-content richtet vollständige Flexzeilen aus. Für die Ausrichtung der einzelnen Items innerhalb ihrer jeweiligen Zeile wird dagegen align-items verwendet.

Befinden sich alle Items in nur einer Flexzeile, hat align-content keine sichtbare Wirkung.

gap, row-gap und column-gap

Mit gap, row-gap und column-gap werden Abstände zwischen Flex-Items beziehungsweise zwischen Flexzeilen festgelegt.

Im Unterschied zu margin entstehen durch diese Eigenschaften nur Abstände zwischen den Items. Am äußeren Rand des Flex-Containers wird kein zusätzlicher Abstand erzeugt. 

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
Eigenschaft Bedeutung
gap Kurzschreibweise für row-gap und column-gap.
row-gap Legt den Abstand zwischen den Flexzeilen fest.
column-gap Legt bei einer zeilenförmigen Anordnung den horizontalen Abstand zwischen den Items fest.

Kein Abstand

Mit gap: 0 entsteht kein zusätzlicher Abstand zwischen den Flex-Items.

1
2
3
4
5
6
.flex-example-gap-none {
  gap: 0;
}

gap mit einem Wert

Wird nur ein Wert angegeben, gilt dieser sowohl für den Abstand zwischen den Zeilen als auch für den Abstand zwischen den Items innerhalb einer Zeile.

1
2
3
4
5
6
.flex-example-gap-one-value {
  gap: 1rem;
}

gap mit zwei Werten

Bei zwei Werten bestimmt der erste Wert den Abstand zwischen den Zeilen. Der zweite Wert bestimmt den Abstand zwischen den Items innerhalb einer Zeile.

1
2
3
4
5
6
.flex-example-gap-two-values {
  gap: 2rem 1rem;
}

Diese Kurzschreibweise entspricht:

.flex-example-gap-two-values {
  row-gap: 2rem;
  column-gap: 1rem;
}

row-gap

row-gap legt nur den Abstand zwischen den Flexzeilen fest. Zwischen den Items derselben Zeile entsteht in diesem Beispiel kein zusätzlicher Abstand.

1
2
3
4
5
6
.flex-example-row-gap {
  row-gap: 2rem;
  column-gap: 0;
}

column-gap

column-gap legt bei flex-direction: row den horizontalen Abstand zwischen den Items fest. Zwischen den Flexzeilen entsteht in diesem Beispiel kein zusätzlicher Abstand.

1
2
3
4
5
6
.flex-example-column-gap {
  row-gap: 0;
  column-gap: 2rem;
}

Mögliche Werte

Für die Abstände können unter anderem folgende CSS-Längeneinheiten verwendet werden:

  • px – feste Angabe in Pixeln
  • rem – abhängig von der Schriftgröße des Wurzelelements
  • em – abhängig von der Schriftgröße des Elements
  • % – prozentuale Angabe
  • vw – abhängig von der Breite des Viewports
  • vh – abhängig von der Höhe des Viewports

Zusätzlich kann der Wert normal verwendet werden. Bei Flexbox entspricht er im Allgemeinen einem Abstand von 0.

gap ist für Flexbox-Layouts meist übersichtlicher als Abstände mit margin, weil keine Sonderbehandlung für das erste oder letzte Item erforderlich ist.

Eigenschaften der Flex-Items

Die Eigenschaften in diesem Abschnitt werden direkt auf einzelne Flex-Items angewendet. Damit kann festgelegt werden, in welcher Reihenfolge die Items erscheinen, wie sie wachsen oder schrumpfen und wie viel Platz sie zunächst einnehmen.

Zu den wichtigsten Eigenschaften der Flex-Items gehören:

  • order – verändert die visuelle Reihenfolge
  • flex-grow – verteilt zusätzlichen freien Platz
  • flex-shrink – bestimmt das Schrumpfverhalten
  • flex-basis – legt die Ausgangsgröße fest
  • flex – Kurzschreibweise für flex-grow, flex-shrink und flex-basis
  • align-self – richtet ein einzelnes Flex-Item entlang der Querachse aus

order

Die Eigenschaft order bestimmt die visuelle Reihenfolge eines Flex-Items innerhalb des Flex-Containers.

Standardmäßig besitzen alle Flex-Items den Wert 0. Items mit einem kleineren Wert werden vor Items mit einem größeren Wert angezeigt. 

.flex-example-item {
  order: 0;
}
Wert Bedeutung
0 Standardwert. Die Items werden entsprechend ihrer Reihenfolge im HTML dargestellt.
Positive Ganzzahl Das Item wird hinter Items mit einem kleineren order-Wert angeordnet.
Negative Ganzzahl Das Item wird vor Items mit einem höheren order-Wert angeordnet.

Reihenfolge ohne order

Ohne eine Angabe von order werden die Items in der Reihenfolge angezeigt, in der sie im HTML stehen.

Item 1
Item 2
Item 3
<div class="flex-example">
  <div class="flex-example-item">Item 1</div>
  <div class="flex-example-item">Item 2</div>
  <div class="flex-example-item">Item 3</div>
</div>

Item 1 an das Ende verschieben

Item 1 erhält den Wert 1. Die beiden anderen Items behalten den Standardwert 0. Deshalb wird Item 1 am Ende angezeigt.

Item 1
Item 2
Item 3
.flex-example-order-one {
  order: 1;
}

Item 3 an den Anfang verschieben

Item 3 erhält den Wert -1. Dieser Wert ist kleiner als der Standardwert 0 der übrigen Items. Item 3 wird deshalb zuerst angezeigt.

Item 1
Item 2
Item 3
.flex-example-order-minus-one {
  order: -1;
}

Jedem Item einen Wert zuweisen

In diesem Beispiel erhält jedes Item einen eigenen order-Wert. Angezeigt werden die Items vom kleinsten bis zum größten Wert.

Item 1 – order: 3
Item 2 – order: 1
Item 3 – order: 2 
.flex-example-order-first {
  order: 1;
}

.flex-example-order-second {
  order: 2;
}

.flex-example-order-third {
  order: 3;
}

Haben mehrere Items denselben order-Wert, bleibt zwischen diesen Items die Reihenfolge aus dem HTML erhalten.

Wichtig: order verändert nur die visuelle Darstellung. Die Reihenfolge im HTML und damit auch die Reihenfolge für Tastaturbedienung und Screenreader bleibt unverändert.

Deshalb sollte order nicht verwendet werden, um eine grundsätzlich falsche HTML-Reihenfolge zu korrigieren. Die Inhalte sollten bereits im HTML in einer sinnvollen Reihenfolge stehen.

flex-grow

Die Eigenschaft flex-grow bestimmt, ob und wie stark ein Flex-Item wachsen darf, wenn im Flex-Container noch freier Platz vorhanden ist.

Der Standardwert ist 0. Das bedeutet, dass ein Flex-Item nicht wächst. Ein positiver Wert erlaubt dem Item, einen Anteil des verfügbaren freien Platzes zu erhalten. 

.flex-item {
  flex-grow: 1;
}
Wert Bedeutung
0 Standardwert. Das Flex-Item wächst nicht und behält grundsätzlich seine Ausgangsgröße.
1 Das Flex-Item darf wachsen. Haben alle Items den Wert 1, wird der freie Platz gleichmäßig verteilt.
2 Das Flex-Item erhält doppelt so viel vom freien Platz wie ein Item mit flex-grow: 1.
Andere positive Zahlen Die Werte bestimmen das Verhältnis, in dem der freie Platz auf die Flex-Items verteilt wird.

Standardwert flex-grow: 0

Standardmäßig wachsen Flex-Items nicht. Der freie Platz am Ende des Flex-Containers bleibt deshalb ungenutzt.

Item 1
Item 2
Item 3
.flex-example-grow-default .flex-example-item {
  flex-grow: 0;
}

Alle Items wachsen gleich stark

Alle drei Items erhalten flex-grow: 1. Der vorhandene freie Platz wird gleichmäßig auf die Items verteilt.

Item 1
Item 2
Item 3
.flex-example-grow-equal .flex-example-item {
  flex-grow: 1;
}

Nur ein Item darf wachsen

Nur Item 2 erhält flex-grow: 1. Die beiden anderen Items behalten den Standardwert 0. Deshalb erhält Item 2 den gesamten verfügbaren freien Platz.

Item 1
Item 2
Item 3
.flex-example-grow-active {
  flex-grow: 1;
}

Freien Platz im Verhältnis 1 : 2 : 1 verteilen

Die Werte von flex-grow bilden ein Verhältnis. Item 2 erhält mit dem Wert 2 doppelt so viel vom freien Platz wie Item 1 und Item 3 mit dem Wert 1.

Item 1 – grow: 1
Item 2 – grow: 2
Item 3 – grow: 1 
.flex-example-grow-1 {
  flex-grow: 1;
}

.flex-example-grow-2 {
  flex-grow: 2;
}

Bei einem Verhältnis von 1 : 2 : 1 wird der freie Platz in vier Anteile aufgeteilt. Item 1 und Item 3 erhalten jeweils einen Anteil. Item 2 erhält zwei Anteile.

Wichtig: Das Verhältnis gilt nur für den zusätzlich verfügbaren freien Platz. Die bereits vorhandene Ausgangsgröße der Items wird dabei berücksichtigt.

Ist im Flex-Container kein freier Platz vorhanden, hat flex-grow keine sichtbare Wirkung. Für das Verhalten bei Platzmangel ist flex-shrink zuständig.

Negative Werte sind für flex-grow nicht erlaubt.

flex-shrink

Die Eigenschaft flex-shrink bestimmt, ob und wie stark ein Flex-Item schrumpfen darf, wenn im Flex-Container nicht genügend Platz vorhanden ist.

Der Standardwert ist 1. Flex-Items dürfen daher standardmäßig kleiner als ihre Ausgangsgröße werden. 

.flex-item {
  flex-shrink: 1;
}
Wert Bedeutung
0 Das Flex-Item darf nicht schrumpfen und behält seine Ausgangsgröße.
1 Standardwert. Das Flex-Item darf bei Platzmangel schrumpfen.
2 Das Flex-Item schrumpft stärker als ein vergleichbares Item mit flex-shrink: 1.
Andere positive Zahlen Die Werte beeinflussen das Verhältnis, in dem der fehlende Platz auf die Flex-Items verteilt wird.

Standardwert flex-shrink: 1

Die drei Items besitzen jeweils eine Ausgangsbreite von 250px. Ist der Container schmaler als die Summe dieser Breiten, schrumpfen alle Items, damit sie gemeinsam in den Container passen.

Item 1
Item 2
Item 3
.flex-example-shrink-default .flex-example-item {
  flex-basis: 250px;
  flex-shrink: 1;
}

Items dürfen nicht schrumpfen

Mit flex-shrink: 0 behalten die Items ihre Ausgangsbreite. Reicht der Platz nicht aus, ragen sie aus dem Container heraus.

Item 1
Item 2
Item 3
.flex-example-shrink-none .flex-example-item {
  flex-basis: 250px;
  flex-shrink: 0;
}

Nur ein Item darf schrumpfen

Item 1 und Item 3 erhalten flex-shrink: 0. Nur Item 2 darf schrumpfen und muss daher den Platzmangel allein ausgleichen.

Item 1 – shrink: 0
Item 2 – shrink: 1
Item 3 – shrink: 0
.flex-example-shrink-one-item .flex-example-item {
  flex-basis: 250px;
  flex-shrink: 0;
}

.flex-example-shrink-one-item .flex-example-shrink-active {
  flex-shrink: 1;
}

Unterschiedliche shrink-Werte

Alle Items besitzen dieselbe Ausgangsgröße. Item 2 erhält flex-shrink: 2 und schrumpft daher stärker als Item 1 und Item 3 mit dem Wert 1.

Item 1 – shrink: 1
Item 2 – shrink: 2
Item 3 – shrink: 1 
.flex-example-shrink-ratio .flex-example-item {
  flex-basis: 250px;
}

.flex-example-shrink-1 {
  flex-shrink: 1;
}

.flex-example-shrink-2 {
  flex-shrink: 2;
}

Die Berechnung von flex-shrink berücksichtigt neben dem Shrink-Wert auch die Ausgangsgröße des jeweiligen Items. Deshalb bedeutet flex-shrink: 2 nicht in jedem Fall, dass das fertige Item exakt halb so breit wie ein Item mit flex-shrink: 1 ist.

Bei gleich großen Ausgangsgrößen ist das Verhältnis besonders leicht erkennbar: Ein Item mit dem Wert 2 übernimmt doppelt so viel von der notwendigen Verkleinerung wie ein Item mit dem Wert 1.

Ist ausreichend Platz im Flex-Container vorhanden, hat flex-shrink keine sichtbare Wirkung. Für die Verteilung von zusätzlichem freien Platz ist flex-grow zuständig.

Negative Werte sind für flex-shrink nicht erlaubt.

flex-basis

Die Eigenschaft flex-basis legt die Ausgangsgröße eines Flex-Items entlang der Hauptachse fest, bevor freier oder fehlender Platz verteilt wird.

Bei flex-direction: row bestimmt flex-basis grundsätzlich die Ausgangsbreite. Bei flex-direction: column bestimmt sie grundsätzlich die Ausgangshöhe. 

.flex-item {
  flex-basis: 200px;
}
Wert Bedeutung
auto Standardwert. Verwendet zunächst die Größe aus width beziehungsweise height. Ist dort keine Größe festgelegt, richtet sich die Ausgangsgröße nach dem Inhalt.
0 Die Ausgangsgröße wird bei der Verteilung des freien Platzes mit 0 angesetzt. Der Inhalt kann die tatsächlich sichtbare Mindestgröße dennoch beeinflussen.
200px Legt eine feste Ausgangsgröße von 200px entlang der Hauptachse fest.
25% Legt die Ausgangsgröße prozentual in Bezug auf die innere Größe des Flex-Containers entlang der Hauptachse fest.
content Bestimmt die Ausgangsgröße anhand des Inhalts des Flex-Items.

Standardwert flex-basis: auto

Bei flex-basis: auto wird eine vorhandene width als Ausgangsbreite verwendet. In diesem Beispiel besitzen alle Items width: 180px.

Item 1
Item 2
Item 3
.flex-example-basis-auto .flex-example-item {
  width: 180px;
  flex-basis: auto;
}

Feste Ausgangsgröße

Mit flex-basis: 200px erhält jedes Item eine Ausgangsbreite von 200px. Diese Größe kann durch flex-grow oder flex-shrink anschließend noch verändert werden.

Item 1
Item 2
Item 3
.flex-example-basis-fixed .flex-example-item {
  flex-basis: 200px;
}

Unterschiedliche Ausgangsgrößen

Den Items können unterschiedliche Ausgangsgrößen zugewiesen werden. Das zweite Item beginnt in diesem Beispiel mit einer größeren Breite.

Item 1 – 120px
Item 2 – 280px
Item 3 – 120px 
.flex-example-basis-small {
  flex-basis: 120px;
}

.flex-example-basis-large {
  flex-basis: 280px;
}

Prozentuale Ausgangsgröße

Prozentwerte beziehen sich auf die innere Größe des Flex-Containers entlang der Hauptachse. Jedes Item erhält hier zunächst 25% der verfügbaren Breite.

Item 1
Item 2
Item 3
.flex-example-basis-percent .flex-example-item {
  flex-basis: 25%;
}

flex-basis: 0

Mit flex-basis: 0 wird die ursprüngliche Größe der Items bei der Verteilung des freien Platzes nicht berücksichtigt. Zusammen mit flex-grow: 1 entstehen dadurch grundsätzlich gleich große Anteile.

kurz
Item mit einem deutlich längeren Inhalt
mittel
.flex-example-basis-zero .flex-example-item {
  flex-grow: 1;
  flex-basis: 0;
}

Unterschied zwischen width und flex-basis

Wenn gleichzeitig width und eine von auto abweichende flex-basis angegeben sind, verwendet Flexbox grundsätzlich flex-basis als Ausgangsgröße entlang der Hauptachse.

Item 1
Item 2
Item 3
.flex-example-basis-overrides-width .flex-example-item {
  width: 100px;
  flex-basis: 200px;
}

In diesem Beispiel ist die Ausgangsbreite daher 200px und nicht 100px.

Wichtig: flex-basis legt eine Ausgangsgröße fest. Die endgültige Größe kann sich anschließend durch flex-grow, flex-shrink, den verfügbaren Platz und die Mindestgröße des Inhalts verändern.

Für die Praxis werden flex-grow, flex-shrink und flex-basis häufig gemeinsam mit der Kurzschreibweise flex angegeben.

flex – Kurzschreibweise

Die Eigenschaft flex ist die Kurzschreibweise für flex-grow, flex-shrink und flex-basis. 

.flex-item {
  flex: flex-grow flex-shrink flex-basis;
}

Ein vollständiges Beispiel sieht folgendermaßen aus:

.flex-item {
  flex: 1 1 200px;
}

Diese Kurzschreibweise entspricht:

.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}
Schreibweise Entsprechende Einzelwerte Bedeutung
flex: initial flex: 0 1 auto Das Item wächst nicht, darf schrumpfen und verwendet seine automatische Ausgangsgröße.
flex: auto flex: 1 1 auto Das Item darf wachsen und schrumpfen. Seine Ausgangsgröße richtet sich nach width, height oder dem Inhalt.
flex: none flex: 0 0 auto Das Item wächst und schrumpft nicht. Es behält grundsätzlich seine automatische Ausgangsgröße.
flex: 1 flex: 1 1 0% Das Item darf wachsen und schrumpfen. Seine Ausgangsgröße wird bei der Verteilung des freien Platzes mit 0% angesetzt.
flex: 1 1 200px flex-grow: 1
flex-shrink: 1
flex-basis: 200px 		Das Item beginnt mit 200px und darf anschließend wachsen oder schrumpfen.

flex: initial

flex: initial entspricht dem Ausgangsverhalten eines Flex-Items. Das Item wächst nicht, darf bei Platzmangel aber schrumpfen.

Item 1
Item 2 mit längerem Inhalt
Item 3
.flex-example-flex-initial .flex-example-item {
  flex: initial;
}

flex: auto

Mit flex: auto dürfen die Items wachsen und schrumpfen. Ihre automatische Ausgangsgröße wird dabei berücksichtigt.

kurz
Item mit längerem Inhalt
mittel
.flex-example-flex-auto .flex-example-item {
  flex: auto;
}

Da die Ausgangsgröße vom Inhalt abhängt, müssen die fertigen Items nicht gleich breit sein.

flex: none

Mit flex: none dürfen die Items weder wachsen noch schrumpfen. Sie behalten grundsätzlich ihre automatische Ausgangsgröße.

Item 1
Item 2
Item 3
.flex-example-flex-none .flex-example-item {
  width: 200px;
  flex: none;
}

Ist der Container zu schmal, können die Items über seinen Rand hinausragen oder einen horizontalen Überlauf verursachen.

flex: 1

flex: 1 wird häufig verwendet, um den verfügbaren Platz gleichmäßig auf mehrere Flex-Items zu verteilen.

kurz
Item mit deutlich längerem Inhalt
mittel
.flex-example-flex-one .flex-example-item {
  flex: 1;
  min-width: 0;
}

Alle Items erhalten denselben Anteil am verfügbaren Platz. Mit min-width: 0 dürfen sie bei langen Inhalten auch kleiner als ihre inhaltsbedingte Mindestbreite werden.

flex: 1 1 200px

Diese Schreibweise ist besonders gut für responsive Karten oder Inhaltsblöcke geeignet. Jedes Item beginnt mit einer Ausgangsgröße von 200px, darf wachsen und bei Platzmangel schrumpfen.

Item 1
Item 2
Item 3
.flex-example-flex-responsive .flex-example-item {
  flex: 1 1 200px;
}

Unterschied zwischen flex: auto und flex: 1

Bei flex: auto wird die automatische Ausgangsgröße der Items berücksichtigt. Ein Item mit mehr Inhalt kann deshalb breiter werden.

Bei flex: 1 wird die Ausgangsgröße für die Platzverteilung mit 0% angesetzt. Dadurch entstehen grundsätzlich gleich große Anteile.

kurz
Item mit deutlich längerem Inhalt
mittel
.flex-example-flex-comparison-auto .flex-example-item {
  flex: auto;
}
kurz
Item mit deutlich längerem Inhalt
mittel
.flex-example-flex-comparison-one .flex-example-item {
  flex: 1;
  min-width: 0;
}

Empfehlung: Die Kurzschreibweise flex ist meistens übersichtlicher als die getrennte Angabe von flex-grow, flex-shrink und flex-basis.

Besonders häufig werden flex: 1, flex: auto und eine vollständige Schreibweise wie flex: 1 1 200px verwendet.

align-self

Die Eigenschaft align-self richtet ein einzelnes Flex-Item entlang der Querachse aus. Sie überschreibt für dieses Item den Wert von align-items, der am Flex-Container festgelegt wurde.

Bei flex-direction: row verläuft die Querachse normalerweise von oben nach unten. Bei flex-direction: column verläuft sie normalerweise von links nach rechts. 

.flex-item {
  align-self: center;
}
Wert Bedeutung
auto Standardwert. Das Item übernimmt grundsätzlich die Ausrichtung aus align-items des Flex-Containers.
stretch Das Item wird entlang der Querachse gestreckt, sofern keine entsprechende feste Größe festgelegt ist.
flex-start Das Item wird am Anfang der Querachse ausgerichtet.
flex-end Das Item wird am Ende der Querachse ausgerichtet.
center Das Item wird in der Mitte der Querachse ausgerichtet.
baseline Das Item wird an der Grundlinie seines Textes ausgerichtet.

Ausgangspunkt: align-items: stretch

Der Container besitzt align-items: stretch. Deshalb werden alle Items über die verfügbare Höhe des Containers gestreckt.

Item 1
Item 2
Item 3
.flex-example-align-self-default {
  align-items: stretch;
  height: 200px;
}

Ein einzelnes Item zentrieren

Item 2 erhält align-self: center. Dadurch wird nur dieses Item in der Mitte der Querachse ausgerichtet. Die anderen Items bleiben gestreckt.

Item 1
Item 2 – center
Item 3
.flex-example-align-self-center {
  align-items: stretch;
  height: 200px;
}

.flex-example-align-self-center .flex-example-align-self-active {
  align-self: center;
}

Unterschiedliche Ausrichtungen

In diesem Beispiel erhält jedes Item einen anderen align-self-Wert. Dadurch lässt sich die Wirkung der einzelnen Werte direkt vergleichen.

flex-start
center
flex-end
stretch 
.flex-example-align-self-start {
  align-self: flex-start;
}

.flex-example-align-self-center-item {
  align-self: center;
}

.flex-example-align-self-end {
  align-self: flex-end;
}

.flex-example-align-self-stretch {
  align-self: stretch;
}

Bei stretch darf für das Item keine feste Höhe angegeben sein. Andernfalls kann es nicht über die Querachse gestreckt werden.

align-self überschreibt align-items

In diesem Beispiel richtet der Container mit align-items: flex-start alle Items am Anfang der Querachse aus. Item 2 überschreibt diese Einstellung mit align-self: flex-end.

Item 1
Item 2 – flex-end
Item 3
.flex-example-align-self-override {
  align-items: flex-start;
  height: 200px;
}

.flex-example-align-self-override-item {
  align-self: flex-end;
}

Wichtig: align-self wirkt nur auf ein einzelnes Flex-Item. Sollen alle Items gleich ausgerichtet werden, wird stattdessen align-items am Flex-Container verwendet.

Hat der Container entlang der Querachse keinen zusätzlichen Platz, ist die Wirkung von align-self möglicherweise nicht sichtbar.