css mit Adi Prinz

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 (Main-Achse, Hauptachse) oder vertikalen (Cross-Achse, 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. Flex-Eigenschaften sind nicht vererbbar.

Flexbox-Eigenschaften

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 flex-start, flex-end, center, space-between, space-around, space-evenly, initial, inherit
align-items Ausrichtung an der Querachse stretch, center, flex-start, flex-end, baseline, initial, inherit
align-content Definiert, wie jede Zeile innerhalb einer Flexbox ausgerichtet ist, wenn es mehrere Zeilen gibt stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, 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

Funktionsweise von Flexbox

Flexbox ist eine Layoutmethode zum Anordnen von Elementen in Zeilen oder Spalten. Elemente werden gestreckt, um zusätzlichen Platz zu füllen, und schrumpfen, um in kleinere Räume zu passen. Wenn Elemente als flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:

  • main-axis -> main-Achse, Hauptachse
  • cross-axis -> cross-achse, Querachse

Das Flex-Modell

Die Hauptachse (main-axis) ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind. Entscheident ist die Eigenschaft flex-direction.

  • flex-direction: row -> main-Achse verläuft horizontal (Standardwert)
  • flex-direction: column -> main-Achse verläuft vertikal

Anfang und Ende dieser Achse werden als main start und main end bezeichnet.

Die Querachse (cross-axis) verläuft in die Gegenrichtung der Hauptachse (main-Achse). Anfang und Ende dieser Achse werden als cross start und cross end bezeichnet. Das übergeordnete Element, auf dem display: flex festgelegt ist wird als Flex-Container bezeichnet. Die als flexible Boxen im Flex-Container angeordnetrn Elemente werden als flex-items bezeichnet.

Basis HTML und CSS der Beispiele

Alle Beispiele dieser Seite bestehen aus einen Flex-Container und einer unterschiedlichen Anzahl von Flex-Items. Die Flex-Eigenschaften werden mit einer Klasse .container? verändert.

Basis-CSS

#container {
  margin-block: 20px;
  max-width: 800px;
  padding: 20px;
  background-color: #594255;
  display: flex;
}
.container? {
  /*Flex Eigenschaften*/
}
#container  .item {
  background-color: #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
}

Basis-HTML

<div id="container" class="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>
<-- Weitere Items -->
</div>

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 oder untereinander vertikal 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 Flexbox

  • 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

Ein einfaches Beispiel mit Standard-Eigenschaften

flex-direction: row steht für horizontale Ausrichtung im Flex-Container. Wenn die Anzahl der Items breiter ist als der Flex-Container entsteht ein Überlauf (Overflow). Das verursacht die Eigenschaft flex-wrap: nowrap.

Die Eigenschaft width: 100px im Flex-Item ist nur gültig, solange der Platz im Flex Container ausreicht. Ansonsten schrumpft die Breite, abhängig vom Inhalt. Im Flex-Item entspricht die Eigenschaft width eher der Eigenschaft min-width im Standard-CSS.

Beispiel-CSS

.container1 {
  flex-direction:row; /* Kann auch entfallen (Standardwert)*/
  flex-wrap: nowrap; /* Kann auch entfallen (Standardwert)*/
  /*flex-flow: row nowrap;  Shorthand -> Kann auch entfallen (Standardwert)*/
  justify-content: flex-start; /* Kann auch entfallen (Standardwert)*/
  align-items: stretch; /* Kann auch entfallen (Standardwert)*/
}
.container1 .item {
  width: 100px;
}

Beispiel-HTML

<div id="container" class="container1">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5

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

Dem Flex-Container wird eine Höhe von 300 Pixel zugewiesen. Damit kann mit flex-flow: column wrap ein Umbruch erzwungen werden. Der Standardwert justify-content: flex-start bewirkt eine Ausrichtung oben, der Standardwert align-items: stretch füllt den Flex-Container horizontal aus.

Beispiel-CSS

.container2 {
  height: 300px;
  flex-flow: column wrap;
}

Beispiel-HTML

<div id="container" class="container2">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5

Weitere Beispiele von flex-direction und flex-wrap.

w3schools-Beispiele direction
w3schools-Beispiele wrap
developer.mozilla-Beispiele

Ausrichtung mit justify-content

Die justify-content Eigenschaft definiert, wie ein Browser verfügbaren Platz zwischen und um Items verteilt. justify-content richtet Items an der main-Achse aus. Damit Items ausgerichtet werden können, muss im Container auch Platz zur Verfügung sein.

Mögliche Werte von justify-content

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • initial
  • inherit

Beispiel-CSS

.container3 {
  flex-flow: row nowrap;
  justify-content: space-around;
}

Beispiel-HTML

<div id="container" class="container3">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe row

1
2
3
4
5
6

Beispiel-Ausgabe column

.container4 {
  height: 600px;
  flex-flow: column nowrap;
  justify-content: space-evenly;
}
1
2
3

w3schools-Beispiele

Ausrichtung mit align-content

Die align-content Eigenschaft richtet Flex-Items innerhalb des Flex-Containers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht. align-content ist ähnlich wie align-items, aber anstatt Flex-Items auszurichten, richtet es Flex-Linien aus.

Mögliche Werte von align-content

  • stretch
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • baseline
  • initial
  • inherit

Beispiel-CSS

.container5 {
  height: 400px;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
}
.container5 .item {
  width: 200px;
}

Beispiel-HTML

<div id="container" class="container5">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

w3schools-Beispiele

Ausrichtung mit align-items

Die align-items Eigenschaft richtet Flex-Items genauso wie justify-content aus, jedoch entlang der Cross-Achse.

Mögliche Werte von align-items

  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
  • initial
  • inherit

Beispiel-CSS

.container6 {
  height: 400px;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}
.container6 .item {
  width: 200px;
}

Beispiel-HTML

<div id="container" class="container6">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6

w3schools-Beispiele

Flexbox-Items Eigenschaften

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-grow

Die flex-grow-Eigenschaft ordnet dem Item einen relativen Anteil an der Seitenbreite im Vergleich zu den anderen Items zu. Wenn nur ein Item den Befehl flex-grow: 1 bekommt, wird dieses den verfügbaren Raum sdes Containers ausfüllen.

Mögliche Werte für flex-grow

  • flex-grow: Zahl -> Wert relativ zu den Geschwisterelementen (Standardwert ist 0)

Beispiel-CSS

.container7 .item {
  width: 100px;
}
.container7 .item:nth-child(2) {
  flex-grow: 1;
}

Die width-Eigenschaft wird von flex-grow überschrieben.

Beispiel-HTML

<div id="container" class="container7">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3

Noch ein Beispiel

.container8 .item {
  width: 100px;
}
.container8 .item:nth-child(1) {
  flex-grow: 2;
}
.container8 .item:nth-child(2) {
  flex-grow: 1;
}

Die Items 1 und 2 füllen den verfügbaren Raum im Verhältnis 1 zu 2 auf. Die width-Eigenschaft wird von flex-grow überschrieben.

1
2
3

Noch ein Beispiel mit geänderter Direction

.container9 {
  height: 400px;
  flex-flow: column nowrap;
}
.container9 .item:nth-child(3) {
  flex-grow: 1;
}

Die Main-Achse verläuft hier vertikal. Item 3 füllt den verfügbaren Raum auf.

1
2
3

flex-shrink

Die flex-shrink-Eigenschaft ordnet dem Item einen relativen Schrumpffaktor im Vergleich zu den anderen Items zu. flex-shrink legt fest, um welchen Faktor ein Flex-Item gegenüber den anderen Flex-Items schrumpft, wenn der Raum des Flex-Containers zu klein wird (Viewport).
Der Vorgabewert ist 1 – anteilig. flex-shrink : 0 verhindert das Verkleinern des Flex-Items.

Mögliche Werte für flex-shrink

  • flex-shrink: Zahl -> Wert relativ zu den Geschwisterelementen (Standardwert ist 1)

Beispiel-CSS

.container10 .item {
  width: 300px;
}
.container10 .item:nth-child(2) {
  flex-shrink: 3;
}

Die Basisbreite der Items wird auf 300px gestellt, können aber im Container nicht vollstädig dargestellt werden. Die Items haben einen Schrumpffaktor 1 (Standardw3ert). Das zweite Item bekommt einen Schrumpffaktor 3. Das Item wird somit dreifach mehr schrumpfen wie die Geschwisterelemente.

Beispiel-HTML

<div id="container" class="container10">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3

flex-basis

Die flex-basis-Eigenschaft ordnet dem Item eine Basis-Breite zu. flex-basis ist die anfängliche Breite der Flex-Items, bevor freier Platz unter den Items verteilt wird. flex-basis kann ein absoluter Wert oder ein Anteil in % sein.

Mögliche Werte für flex-basis

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

Beispiel-CSS

.container11 .item:nth-child(1) {
  flex-basis: 25%;
}
.container11 .item:nth-child(2) {
  flex-basis: 50%;
}
.container11 .item:nth-child(3) {
  flex-basis: 25%;
}

Die Basisbreite wird jedem Item einzeln zuggewiesen.

Beispiel-HTML

<div id="container" class="container11">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3

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

Beispiel-CSS

.container12 .item:nth-child(1) {
  flex: 1;
}
.container12 .item:nth-child(2) {
  flex: 0 20%;
}
.container12 .item:nth-child(3) {
  flex: 2;
}

Item 2 nimmt 20% der Breite ein. Item 1 und Item 3 nehmen den verfügbaren Raum im Verhältnis 1:2 ein.

Beispiel-HTML

<div id="container" class="container12">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3

align-self

Während sie mit align-items Ausrichtungen aller Items bestimmen, kann align-self jedem Item einzeln eine Ausrichtung zuweisen. align-self überschreibt dabei den Wert von align-items.

Mögliche Werte für align-self

  • auto: Item erbt Eigenschaften von align-items (Standardwert)
  • 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)
  • initial
  • inherit

Beispiel-CSS

.container13 {
  height: 300px;
}
.container13 .item {
  flex: 0 33%;
}
.container13 .item:nth-child(1) {
  align-self: center;
}
.container13 .item:nth-child(2) {
  align-self: flex-start;
}
.container13 .item:nth-child(3) {
  align-self: flex-end;
}

Item 2 nimmt 20% der Breite ein. Item 1 und Item 3 nehmen den verfügbaren Raum im Verhältnis 1:2 ein.

Beispiel-HTML

<div id="container" class="container13">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3

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 Item nach vorne

Beispiel-CSS

.container14 .item:nth-child(1) {
  order: 0;
}
.container14 .item:nth-child(2) {
  order: -1;
}
.container14 .item:nth-child(3) {
  order: 1;
}

Item 2 nimmt 20% der Breite ein. Item 1 und Item 3 nehmen den verfügbaren Raum im Verhältnis 1:2 ein.

Beispiel-HTML

<div id="container" class="container14">
<div class="item">1</div>
<-- Weitere Items -->
</div>

Beispiel-Ausgabe

1
2
3