Überschrift strassencoder.ch
Logo strassencoder.ch
Überschrift Layout Techniken

CSS-Flexbox für ein Layout in HTML

Mit dem eindimensionalen Layoutsystem CSS-Flexbox lassen sich Flex-Items in Zeilen oder Spalten anordnen. Flex-Items können wachsen um zusätzlichen Platz zu füllen oder schrumpfen um im übergeordneten Flex-Container nicht zu überlaufen. Auch die Reihenfolge der Flex-Items kann geändert werden. Auch Lücken (gap) zwischen den Elementen können definiert werden.

Wie sieht der HTML-Code aus:

<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>

.flex-container ist der sogenannte Flexbox-Container mit denn enthaltenen Kindselementen .flex-items1, .flex-items2 und .flex-items3 (den sogenannten Flex-Items). Mit dem CSS-Code wird Flexbox aktiviert.

Wie sieht der CSS-Code aus:

.flex-container {
display:flex;
}

Folgende Standwerte sind mit display: flex; in CSS aktiviert:

  1. flex-direction ist row(von links nach rechts)
  2. Mit justify-content werden die Flex-Items auf der Haupt-Achse links im Flex-Container angeordnet(flex-start).
  3. Bei align-items ist auf der Quer-Achse "stretch" Standard. Alle Elemente sind gleich hoch.

flex-direction

Wenn die Richtung row ist, verläuft die Hauptachse von links nach rechts: flex-row
Wenn flex-direction geändert wird, ändert sich auch die Richtung der Hauptachse. Bei flex-direction: column geht die Hauptachse von oben nach unten. flex-column
Und die Richtung der Hauptachse ändert sich ebenfalls durch ...-reverse: Bei row-reverse ist die Richtung von rechts nach links. flex-row-reverse
Bei column-reverse von unten nach oben. flex-column-reverse
Das ist ganz wichtig: Die Richtung der Hauptachse hängt davon ab, in welche Richtung Sie die Flexitems mit flex-direction geschubst haben. Unten sehen Sie wie die Achsen stehen bei: flex-direction: row; Haupt-und Quer Achse
Flex-direction Row

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main style="border: 1px dotted black">
<div class="eins"><em>1</em></div>
<div class="zwei"><em>2</em></div>
<div class="drei"><em>3</em></div>
</main>
</body>
</html>

<style>
main {
display: flex;
flex-direction: row;
}
.eins {
background-color: dodgerblue;
padding: 0.2rem;
}
.zwei {
background-color: black;
color: white;
padding: 0.2rem;
}
.drei {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Flex-direction Column

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main4" style="border: 1px dotted black">
<div class="vier"><em>1</em></div>
<div class="fuenf"><em>2</em></div>
<div class="sechs"><em>3</em></div>
</main>
</body>
</html>

<style>
.main4 {
display: flex;
flex-direction: column;
}
.vier {
background-color: dodgerblue;
padding: 0.2rem;
}
.fuenf {
background-color: black;
padding: 0.2rem;
color: white;
}
.sechs {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Flex-direction Column-Reverse

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main1" style="border: 1px dotted black">
<div class="sieben"><em>1</em></div>
<div class="acht"><em>2</em></div>
<div class="neun"><em>3</em></div>
</main>
</body>
</html>

<style>
.main1 {
display: flex;
flex-direction: column-reverse;
}
.sieben {
background-color: dodgerblue;
padding: 0.2rem;
}
.acht {
background-color: black;
padding: 0.2rem;
color: white;
}
.neun {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Flex-direction Row-Reverse

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main2" style="border: 1px dotted black">
<div class="zehn"><em>1</em></div>
<div class="elf"><em>2</em></div>
<div class="zwölf"><em>3</em></div>
</main>
</body>
</html>

<style>
.main2 {
display: flex;
flex-direction: row-reverse;
}
.zehn {
background-color: dodgerblue;
padding: 0.2rem;
}
.elf {
background-color: black;
padding: 0.2rem;
color: white;
}
.zwölf {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3

justify-content in Flexbox (flex-direction: row; ):

justify-content: flex-start; Am Anfang der Hauptachse.
justify-content: center; In der Mitte der Hauptachse.
justify-content: flex-end; Am Ende der Hauptachse.
justify-content: space-between; Das 1. Flex-Item ist am ganz Anfang der Achse, das letzte ganz am Ende. Alle anderen Items werden gleichmäßig verteilt. Es entstehen also Abstände zwischen den Items.
justify-content: space-around; Die Flex-Items werden wie bei space-between verteilt, allerdings entsteht auch vor dem 1. Item und nach dem letzten Item ein Abstand.
justify-content: space-evenly; Die Flex-Items werden wie bei den beiden vorherigen Methoden verteilt, allerdings werden die Abstände einheitlich gewählt.

In den nachfolgenden Beispielen wird display: flex geschrieben in CSS. Die Haupt-Achse mit justify-content verläuft in der Horizontalen(von links nach rechts). Unten werden also Flex-Items in der Horizontalen ausgerichtet mit justify-content.

Justify-Content-Flex-Start

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main15" style="border: 1px dotted black">
<div class="dreiundvierzig"><em>1</em></div>
<div class="vierundvierzig"><em>2</em></div>
<div class="fuenfundvierzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main15 {
display: flex;
justify-content: flex-start;
}
.dreiundvierzig {
background-color: dodgerblue;
padding: 0.2rem;
}
.vierundvierzig {
background-color: black;
padding: 0.2rem;
color: white;
}
.fuenfundvierzig {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Justify-Content-Center

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main16" style="border: 1px dotted black">
<div class="sechsundvierzig"><em>1</em></div>
<div class="siebenvierzig"><em>2</em></div>
<div class="achtundvierzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main16 {
display: flex;
justify-content: center;
}
.sechsundvierzig {
background-color: dodgerblue;
padding: 0.2rem;
}
.siebenundvierzig {
background-color: black;
padding: 0.2rem;
color: white;
}
.achtundvierzig {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Justify-Content-Flex-End

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main17" style="border: 1px dotted black">
<div class="neunundvierzig"><em>1</em></div>
<div class="fuenfzig"><em>2</em></div>
<div class="einundfuenfzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main17 {
display: flex;
justify-content: flex-end;
}
.neunundvierzig {
background-color: dodgerblue;
padding: 0.2rem;
}
.fuenfzig {
background-color: black;
padding: 0.2rem;
color: white;
}
.einundfuenfzig {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Justify-Content-Space-Between

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main18" style="border: 1px dotted black">
<div class="zweiundfuenfzig"><em>1</em></div>
<div class="dreiundfuenfzig"><em>2</em></div>
<div class="vierundfuenfzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main18 {
display: flex;
justify-content: space-between;
}
.zweiundfuenfzig {
background-color: dodgerblue;
padding: 0.2rem;
}
.dreundfuenfzig {
background-color: black;
padding: 0.2rem;
color: white;
}
.vierundfuenfzig {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Justify-Content-Space-Around

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main19" style="border: 1px dotted black">
<div class="fuenfundfuenfzig"><em>1</em></div>
<div class="sechsundfuenfzig"><em>2</em></div>
<div class="siebenundfuenfzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main19 {
display: flex;
justify-content: space-around;
}
.fuenfundfuenfzig {
background-color: dodgerblue;
padding: 0.2rem;
}
.sechsundfuenfzig {
background-color: black;
padding: 0.2rem;
color: white;
}
.siebenundfuenfzig {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Justify-Content-Space-Evenly

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main20" style="border: 1px dotted black">
<div class="achtundfuenfzig"><em>1</em></div>
<div class="neunundfuenfzig"><em>2</em></div>
<div class="sechzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main20 {
display: flex;
justify-content: space-evenly;
}
.achtundfuenfzig {
background-color: dodgerblue;
padding: 0.2rem;
}
.neunundfuenfzig {
background-color: black;
padding: 0.2rem;
color: white;
}
.sechzig {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3

align-items in Flexbox (flex-direction: row; ):

align-items: stretch; Die Elemente werden bei der Darstellung nebeneinander gleich hoch(Standard).
align-items: flex-start; Die Elemente werden bei der Darstellung nebeneinander oben angeordnet.
align-items: center; Die Elemente werden mittig angeordnet.
align-items: flex-end; Die Elemente werden bei der Darstellung nebeneinander unten angeordnet.
align-items: baseline; Die Basislinie(Hauptlinie bei Schrift) wird zueinander angeordnet. Damit man eine Auswirkung sieht, muss die Schriftgrösse unterschiedlich sein.

In den nachfolgenden Beispielen wird display: flex geschrieben. Die flex-direction ist row(Standard) von links nach rechts. Das heisst die Quer-Achse ist von oben nach unten: Unten werden also Flex-Items in der Vertikalen ausgerichtet mit align-items. Auf der Haupt-Achse ist der Standard: justify-content: flex-start . In unseren Beispielen werden die Flex-Items ganz links angeordnet auf der Haupt-Achse.

Align-Items-Stretch

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main5" style="border: 1px dotted black">
<div class="dreizehn"><em>1</em></div>
<div class="vierzehn"><em>2</em></div>
<div class="fuenfzehn"><em style="font-size: 180%">3</em></div>
</main>
</body>
</html>

<style>
.main5 {
display: flex;
align-items: stretch;
}
.dreizehn {
background-color: dodgerblue;
padding: 0.2rem;
}
.vierzehn {
background-color: black;
padding: 0.2rem;
color: white;
}
.fuenfzehn {
background-color: grey;
padding: 0.2rem;
}
</style>
1
2
3
Align-Items-Flex-Start

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main6" style="border: 1px dotted black">
<div class="sechszehn"><em>1</em></div>
<div class="siebzehn"><em>2</em></div>
<div class="achtzehn"><em>3</em></div>
</main>
</body>
</html>

<style>
.main6 {
display: flex;
align-items: flex-start;
}
.sechszehn {
background-color: dodgerblue;
padding: 0.2rem;
height: 150px;
}
.siebzehn {
background-color: black;
padding: 0.2rem;
color: white;
height: 200px;
}
.achtzehn {
background-color: grey;
padding: 0.2rem;
height: 150px;
}
</style>
1
2
3
Align-Items-Center

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main7" style="border: 1px dotted black">
<div class="neunzehn"><em>1</em></div>
<div class="zwanzig"><em>2</em></div>
<div class="einundzwanzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main7 {
display: flex;
align-items: center;
}
.neunzehn {
background-color: dodgerblue;
padding: 0.2rem;
height: 150px;
}
.zwanzig {
background-color: black;
padding: 0.2rem;
color: white;
height: 200px;
}
.einundzwanzig {
background-color: grey;
padding: 0.2rem;
height: 150px;
}
</style>
1
2
3
Align-Items-Flex-End

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main8" style="border: 1px dotted black">
<div class="zweiundzwanzig"><em>1</em></div>
<div class="dreiundzwanzig"><em>2</em></div>
<div class="vierundzwanzig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main8 {
display: flex;
align-items: flex-end;
}
.zweiundzwanzig {
background-color: dodgerblue;
padding: 0.2rem;
height: 150px;
}
.dreiundzwanzig {
background-color: black;
padding: 0.2rem;
color: white;
height: 200px;
}
.vierundzwanzig {
background-color: grey;
padding: 0.2rem;
height: 150px;
}
</style>
1
2
3
Align-Items-Baseline

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main9" style="border: 1px dotted black">
<div class="fuenfundzwanzig"><em>1</em></div>
<div class="sechsundzwanzig"><em>2</em></div>
<div class="siebenundzwanzig"><em style="font-size: 180%">3</em></div>
</main>
</body>
</html>

<style>
.main9 {
display: flex;
align-items: baseline;
}
.fuenfundzwanzig {
background-color: dodgerblue;
padding: 0.2rem;
height: 150px;
}
.sechsundzwanzig {
background-color: black;
padding: 0.2rem;
color: white;
height: 200px;
}
.siebenundzwanzig {
background-color: grey;
padding: 0.2rem;
height: 150px;
}
</style>
1
2
3

Flex-Items horizontal und vertikal zentrieren

Wenn Sie Flex-Items mittig auf beiden Achsen zentrieren möchten, schreiben Sie im Flex-Container justify-content: center; und align-items: center; .

Überschrift Justify-Content und Align-Items:center

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main21" style="border: 1px dotted black">
<div class="einundsechsig"><em>1</em></div>
<div class="zweiundsechsig"><em>2</em></div>
<div class="dreiundsechsig"><em style="font-size: 180%">3</em></div>
</main>
</body>
</html>

<style>
.main21 {
display: flex;
align-items: center;
justify-content:center;
height: 300px;
}
.einundsechsig {
background-color: dodgerblue;
padding: 0.2rem;
height: 150px;
}
.zweiundsechsig {
background-color: black;
padding: 0.2rem;
color: white;
height: 200px;
}
.dreiundsechsig {
background-color: grey;
padding: 0.2rem;
height: 150px;
}
</style>
1
2
3

Flexible Flex-Items

flex-grow Inwieweit Flex-Items grösser werden dürfen. Dahinter schreiben Sie einen Faktor.
flex-shrink Inwieweit Flex-Items schrumpfen dürfen. Auch dahinter schreiben Sie einen Faktor.
flex-basis Der Basiswert (Anfangs-Wert) von Flex-Items, also die optimalen Ausmasse(In Pixel oder %).

flex-grow

  1. 0: Flex-Item wird nicht wachsen. Breite des Elements oder flex-basis.
  2. 1: Standard(Vorlage): Alle Flex-Items innerhalb der Zeile weisen die gleiche Breite auf.
  3. 2: Verbreitern des Flex-Item um den Faktor 2 gegenüber allen anderen Flex-Items.

flex-shrink

  1. 0: verhindert das verkleinern des Flex-Item.
  2. 1: (Vorgabe) das Flex-Item wird schrumpfen anteilig, so das alle Flex-Items in einer Zeile in den Flex-Container passen.
  3. 2: das Flex-Item schrumpft um den Faktor 2 gegenüber allen anderen Flex-Items.

flex-basis

  1. Breite der Flex-Items (Anfangs-Wert), bevor freier Platz unter den Items verteilt wird.
  2. absoluter Wert oder ein Anteil in % sein(10em, 200px, 10%).

Flex-Items schrumpfen lassen

Im folgenden Beispiel schrumpft das mittlere Flex-Item mit flex-shrink: 1 anteilig. Das heisst weil die flex-basis: 90% beträgt und den anderen zwei Flex-Items ebenfalls eine flex-basis von 300px erhalten(absoluter Wert) haben, muss das Flex-Item <div class="fuenfundsechsig"> schrumpfen. Sonst würde die Flex-Items über den Flex-Container herausragen, weil 90% + 600px mehr als 100% der Breite des Flex-Container sind.

Überschrift Flex-Shrink

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main22" style="border: 1px dotted black">
<div class="vierundsechsig"><em>1</em></div>
<div class="fuenfundsechsig"><em>2</em></div>
<div class="sechsundsechsig"><em>3</em></div>
</main>
</body>
</html>

<style>
.main22 {
display: flex;
}
.vierundsechsig {
background-color: dodgerblue;
padding: 0.2rem;
flex-basis: 300px;
}
.fuenfundsechsig {
background-color: black;
padding: 0.2rem;
color: white;
flex-shrink: 1;
flex-basis: 90%;
}
.sechsundsechsig {
background-color: grey;
padding: 0.2rem;
flex-basis: 300px;
}
</style>
1
2
3

Flex-Items wachsen lassen

Im folgenden Beispiel wachsen Flex-Items mit flex-grow: 2 bwz. 4 (dass ist der Multiplikator). Die Inhalte werden verteilt auf den Flex-Container in der Horizontalen.

Überschrift Flex-Grow

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main23" style="border: 1px dotted black">
<div class="siebenundsechsig"><em>1</em></div>
<div class="achtundsechsig"><em>2</em></div>
<div class="neunundsechsig"><em>3</em></div>
<div class="siebzig"><em>4</em></div>
</main>
</body>
</html>

<style>
.main23 {
display: flex;
}
.siebenundsechsig {
background-color: dodgerblue;
padding: 0.2rem;
}
.achtundsechsig {
background-color: black;
padding: 0.2rem;
color: white;
flex-grow: 4;
}
.neunundsechsig {
background-color: grey;
padding: 0.2rem;
flex-grow: 2;
}
.siebzig {
background-color: dodgerblue;
padding: 0.2rem;
}
</style>
1
2
3
4

Die Reihenfolge der Flex-Items ändern

Mit order: ...; kann die Reihenfolge der Elemente im HTML-Code geändert werden. Ausserdem wurde eine Lücke von 5px zwischen den Flex-Items definiert mit gap: 5px; .

Überschrift Order

<!doctype html>
<html>
<head>
<title>Page</title>
</head>
<body>
<main class="main24" style="border: 1px dotted black">
<div class="einundsiebig"><em>1</em></div>
<div class="zweiundsiebig"><em>2</em></div>
<div class="dreiundsiebig"><em>3</em></div>
<div class="vierundsiebig"><em>4</em></div>
</main>
</body>
</html>

<style>
.main24 {
display: flex;
gap: 5px;
}
.einundsiebig {
background-color: dodgerblue;
padding: 0.2rem;
order:4;
}
.zweiundsiebig {
background-color: black;
padding: 0.2rem;
color: white;
order:2;
}
.dreiundsiebig {
background-color: grey;
padding: 0.2rem;
order:3;
}
.vierundsiebig {
background-color: dodgerblue;
padding: 0.2rem;
order:1;
}
</style>
1
2
3
4
Überschrift strassencoder.ch