Kapitel 4: Flexbox aktivieren

4.1 Syntax zur Aktivierung von Flexbox im Container

Grundlegende Syntax

Um ein Element zu einem Flex-Container zu machen, verwendest du die CSS-Eigenschaft display mit dem Wert flex oder inline-flex.

Syntax:

css

.container {
  display: flex;     /* Block-Level Flex-Container */
  /* oder */
  display: inline-flex;  /* Inline-Level Flex-Container */
}

Unterschied: display: flex vs. display: inline-flex

display: flex (Block-Level)

css

.container {
  display: flex;
  background-color: lightblue;
  padding: 20px;
}

/* Verhalten: */
/* - Container nimmt die volle verfügbare Breite ein (100%) */
/* - Andere Elemente werden oberhalb/unterhalb platziert (wie ein Block) */

HTML:

html

<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
</div>
<p>Dieser Text steht unter dem Container.</p>

Visualisierung:

┌────────────────────────────────────┐
│ [Element 1] [Element 2]           │  ← Container (100% Breite)
└────────────────────────────────────┘
Dieser Text steht unter dem Container.

display: inline-flex (Inline-Level)

css

.container {
  display: inline-flex;
  background-color: lightblue;
  padding: 20px;
}

/* Verhalten: */
/* - Container wird wie ein Inline-Element behandelt */
/* - Andere Inline-Elemente können daneben stehen */
/* - Breite passt sich dem Inhalt an */

HTML:

html

<p>Dieser Text ist </p>
<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
</div>
<p> und geht hier weiter.</p>

Visualisierung:

Dieser Text ist [Element 1] [Element 2] und geht hier weiter.
                ↑
                Inline-Container (passt sich dem Inhalt an)

Wann welchen Wert verwenden?

Verwende display: flex wenn:

✅ Haupt-Layout-Container (Header, Main, Footer)
✅ Navigationen (ganze Zeile einnehmen sollen)
✅ Karten-Container (volle Breite nutzen sollen)
✅ Generell für Layouts

Verwende display: inline-flex wenn:

✅ Kleine Komponenten innerhalb von Text
✅ Buttons mit Flex-Alignment (Icon + Text)
✅ Inline-Elemente mit Flex-Eigenschaften

Beispiel: Button mit Icon

html

<button class="icon-button">
  <span class="icon">🏠</span>
  <span class="text">Home</span>
</button>

css

.icon-button {
  display: inline-flex;  /* Inline-Element mit Flex */
  align-items: center;    /* Vertikal zentrieren */
  gap: 8px;              /* Abstand zwischen Icon und Text */
  padding: 10px 20px;
  border: none;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

Ergebnis:

[ 🏠 Home ]  ← Button ist ein Inline-Element, Icon und Text sind flexibel ausgerichtet

4.2 Standardverhalten nach Aktivierung von Flexbox

Sobald display: flex gesetzt ist, ändern sich automatisch einige Eigenschaften der Flex-Elemente.

Standardeinstellungen (Defaults)

css

.container {
  display: flex;
  
  /* Folgende Werte sind standardmäßig aktiv: */
  flex-direction: row;         /* Hauptachse: horizontal */
  flex-wrap: nowrap;           /* Kein Umbruch */
  justify-content: flex-start; /* Elemente am Hauptachsen-Start */
  align-items: stretch;        /* Elemente strecken sich auf Querachse */
  align-content: stretch;      /* (Nur bei Umbruch relevant) */
}

Wie Flex-Elemente standardmäßig angeordnet werden

1. Horizontal in einer Zeile:

html

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

css

.container {
  display: flex;
  border: 2px solid #333;
  padding: 10px;
}

.item {
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

┌────────────────────────────────────┐
│ [1] [2] [3]                      │  ← Horizontal in einer Zeile
└────────────────────────────────────┘

2. Elemente schrumpfen, um in eine Zeile zu passen:

css

.container {
  display: flex;
  width: 300px;  /* Begrenzte Breite */
}

.item {
  width: 150px;  /* Eigentlich zu breit für Container */
  padding: 20px;
  background-color: lightblue;
}

Ergebnis:

Elemente werden automatisch verkleinert, um in eine Zeile zu passen
Sie überlaufen nicht (Standard: flex-shrink: 1)

3. Höhe der Elemente passt sich an (wenn keine Höhe gesetzt ist):

css

.container {
  display: flex;
  height: 200px;  /* Container hat feste Höhe */
  border: 2px solid #333;
}

.item {
  /* Keine Höhe gesetzt! */
  padding: 20px;
  background-color: lightblue;
}

Ergebnis:

Elemente strecken sich auf die volle Höhe des Containers
Standard: align-items: stretch

Verhalten von Flex-Elementen (Zusammenfassung)

Eigenschaft	Standardwert	Erklärung
Ausrichtung	Horizontal in einer Zeile	`flex-direction: row`
Umbruch	Kein Umbruch	`flex-wrap: nowrap`
Breite	Schrumpft bei Bedarf	`flex-shrink: 1`
Höhe	Streckt sich auf Containerhöhe	`align-items: stretch`
Reihenfolge	Wie im HTML	`order: 0`

4.3 Standardverhalten von Flex-Elementen (Wichtig für Anfänger)

Wie Flex-Elemente behandelt werden

Sobald ein Container display: flex hat, werden alle direkten Kindelemente zu Flex-Elementen. Sie verlieren einige ihrer ursprünglichen Eigenschaften.

Veränderungen:

1. float hat keine Wirkung mehr:

css

.item {
  float: left;  /* WIRKT NICHT mehr bei Flex-Elementen! */
}

2. clear hat keine Wirkung mehr:

css

.item {
  clear: both;  /* WIRKT NICHT mehr bei Flex-Elementen! */
}

3. vertical-align hat keine Wirkung mehr:

css

.item {
  vertical-align: middle;  /* WIRKT NICHT mehr bei Flex-Elementen! */
}

4. Elemente werden zu "Flex-Elementen":

Sie akzeptieren flex-grow, flex-shrink, flex-basis
Sie können mit order neu angeordnet werden
Sie richten sich entlang der Haupt- und Querachse aus

Praktisches Beispiel

HTML:

html

<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>

CSS (ohne Flexbox):

css

.container {
  /* Kein display: flex */
  border: 2px solid #333;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightblue;
  
  /* float: left würde hier funktionieren */
  /* display: inline-block würde hier funktionieren */
}

Ergebnis (ohne Flexbox):

[Element 1]
[Element 2]
[Element 3]
↑
Alle untereinander (Block-Elemente)

CSS (mit Flexbox):

css

.container {
  display: flex;  /* Flexbox aktiviert! */
  border: 2px solid #333;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightblue;
  
  /* float: left würde JETZT NICHT MEHR funktionieren */
}

Ergebnis (mit Flexbox):

[Element 1] [Element 2] [Element 3]
↑
Alle nebeneinander in einer Zeile

4.4 Praxisbeispiel: Flexbox aktivieren und Standardverhalten beobachten

Übung: Erstes Flexbox-Layout beobachten

Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox aktivieren</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Flexbox aktivieren</h1>
  
  <div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
  </div>

</body>
</html>

Schritt 2: CSS ohne Flexbox (zum Vergleich)

css

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.container {
  /* NOCH KEIN display: flex */
  border: 3px solid red;
  padding: 10px;
  margin-top: 20px;
}

.item {
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
  border: 2px solid blue;
}

Beobachtung (ohne Flexbox):

Elemente stehen untereinander (Block-Elemente)
Jedes Element nimmt die volle Breite ein

Schritt 3: Flexbox aktivieren

css

.container {
  display: flex;  /* JETZT Flexbox aktivieren! */
  border: 3px solid red;
  padding: 10px;
  margin-top: 20px;
}

Beobachtung (mit Flexbox):

Elemente stehen nebeneinander in einer Zeile
Elemente sind so schmal wie ihr Inhalt (wenn keine Breite gesetzt ist)
Höhe der Elemente passt sich an (stretch)

Schritt 4: Experimentieren

Experiment 1: Container breiter/niedriger machen

css

.container {
  display: flex;
  width: 500px;   /* Feste Breite */
  height: 300px;  /* Feste Höhe */
  border: 3px solid red;
}

Beobachtung:

Elemente sind nur so breit wie ihr Inhalt
Aber: Höhe der Elemente wird auf 300px gestreckt (align-items: stretch)

Experiment 2: align-items ändern

css

.container {
  display: flex;
  height: 300px;
  align-items: flex-start;  /* Elemente am oberen Rand */
  border: 3px solid red;
}

Beobachtung:

Elemente sind jetzt oben ausgerichtet
Höhe passt sich nicht mehr an den Container an

Experiment 3: justify-content ändern

css

.container {
  display: flex;
  width: 500px;
  justify-content: center;  /* Elemente horizontal zentrieren */
  border: 3px solid red;
}

Beobachtung:

Alle Elemente sind horizontal zentriert

4.5 Häufige Fehler: Ursachen, warum Flexbox nicht wirkt

Fehler 1: `display: flex` nicht gesetzt

Symptom:

Elemente verhalten sich wie normale Block-Elemente
justify-content, align-items haben keine Wirkung

Ursache:

css

.container {
  /* display: flex;  ← VERGESSEN! */
  justify-content: center;  /* HAT KEINE WIRKUNG! */
}

Lösung:

css

.container {
  display: flex;  /* JETZT gesetzt */
  justify-content: center;  /* FUNKTIONIERT! */
}

Fehler 2: Tippfehler bei `display: flex`

Symptom:

Flexbox wirkt nicht
Browser zeigt Fehler in den Entwicklerwerkzeugen

Ursache:

css

.container {
  display: fleks;  /* TIPPFEHLER! */
  /* oder */
  display: flexx;   /* TIPPFEHLER! */
  /* oder */
  display: flx;     /* TIPPFEHLER! */
}

Lösung:

css

.container {
  display: flex;  /* Richtig schreiben! */
}

Fehler 3: Elemente sind keine direkten Kinder

Symptom:

Innere Elemente verhalten sich nicht wie Flex-Elemente

Ursache:

html

<div class="container">       <!-- Flex-Container -->
  <div class="wrapper">       <!-- KEIN Flex-Element (nur Container) -->
    <div class="item">1</div> <!-- ABER: .item ist KEIN direktes Kind! -->
  </div>
</div>

CSS:

css

.container {
  display: flex;
}

.item {
  flex: 1;  /* HAT KEINE WIRKUNG, weil .item kein direktes Kind ist */
}

Lösung 1: HTML anpassen

html

<div class="container">
  <div class="item">1</div>  <!-- JETZT direktes Kind -->
  <div class="item">2</div>
</div>

Lösung 2: Verschachtelte Flexbox verwenden

html

<div class="container">       <!-- Flex-Container 1 -->
  <div class="wrapper">       <!-- Flex-Element 1 + Flex-Container 2 -->
    <div class="item">1</div> <!-- Flex-Element 2 -->
  </div>
</div>

css

.container {
  display: flex;
}

.wrapper {
  display: flex;  /* JETZT ist .wrapper auch ein Flex-Container */
}

Fehler 4: CSS wird nicht geladen

Symptom:

Keine Änderungen sichtbar
Flexbox wirkt nicht

Ursachen:

Dateipfad falsch:

html

<!-- Falsch -->
<link rel="stylesheet" href="stlye.css">

<!-- Richtig -->
<link rel="stylesheet" href="style.css">

Datei nicht gespeichert:
- In VS Code: Strg + S drücken
- Oder "Auto Save" aktivieren
Browser-Cache:
- Strg + F5 drücken (Harte Aktualisierung)
- Oder Cache in Entwicklerwerkzeugen leeren

Fehler 5: Alte Browser (IE9 und älter)

Symptom:

Flexbox wirkt in alten Browsern nicht

Lösung:

Flexbox wird in IE10+ unterstützt (mit -ms- Präfix)
Für IE9 und älter: Fallback mit Float oder Inline-Block bereitstellen

css

.container {
  /* Fallback für alte Browser */
  display: block;
}

/* Moderne Browser */
@supports (display: flex) {
  .container {
    display: flex;
  }
}

Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Wie man Flexbox aktiviert (display: flex / display: inline-flex)
✅ Den Unterschied zwischen flex und inline-flex
✅ Das Standardverhalten von Flex-Elementen
✅ Wie Flex-Elemente standardmäßig angeordnet werden
✅ Häufige Fehler und deren Behebung

Nächstes Kapitel: In Kapitel 5 lernen wir die Container-Eigenschaften kennen: flex-direction und flex-wrap.

Übungsaufgaben

Aufgabe 4.1

Erstelle einen Container mit 3 Elementen. Aktiviere Flexbox und beobachte das Standardverhalten. Ändere dann zu display: inline-flex und beobachte den Unterschied.

Aufgabe 4.2

Erstelle einen Container mit 5 Elementen. Setze display: flex, aber die Elemente verhalten sich nicht wie Flex-Elemente. Finde den Fehler (Tipp: Schau dir die HTML-Struktur genau an).

Aufgabe 4.3

Erstelle einen Button mit Icon und Text. Verwende display: inline-flex, um Icon und Text vertikal zu zentrieren.

Kapitel 4: Flexbox aktivieren ​

4.1 Syntax zur Aktivierung von Flexbox im Container ​

Grundlegende Syntax ​

Unterschied: display: flex vs. display: inline-flex ​

Wann welchen Wert verwenden? ​

4.2 Standardverhalten nach Aktivierung von Flexbox ​

Standardeinstellungen (Defaults) ​

Wie Flex-Elemente standardmäßig angeordnet werden ​

Verhalten von Flex-Elementen (Zusammenfassung) ​

4.3 Standardverhalten von Flex-Elementen (Wichtig für Anfänger) ​

Wie Flex-Elemente behandelt werden ​

Praktisches Beispiel ​

4.4 Praxisbeispiel: Flexbox aktivieren und Standardverhalten beobachten ​

Übung: Erstes Flexbox-Layout beobachten ​

4.5 Häufige Fehler: Ursachen, warum Flexbox nicht wirkt ​

Fehler 1: display: flex nicht gesetzt ​

Fehler 2: Tippfehler bei display: flex ​

Fehler 3: Elemente sind keine direkten Kinder ​

Fehler 4: CSS wird nicht geladen ​

Fehler 5: Alte Browser (IE9 und älter) ​

Zusammenfassung ​

Übungsaufgaben ​

Aufgabe 4.1 ​

Aufgabe 4.2 ​

Aufgabe 4.3 ​

Kapitel 4: Flexbox aktivieren

4.1 Syntax zur Aktivierung von Flexbox im Container

Grundlegende Syntax

Unterschied: display: flex vs. display: inline-flex

Wann welchen Wert verwenden?

4.2 Standardverhalten nach Aktivierung von Flexbox

Standardeinstellungen (Defaults)

Wie Flex-Elemente standardmäßig angeordnet werden

Verhalten von Flex-Elementen (Zusammenfassung)

4.3 Standardverhalten von Flex-Elementen (Wichtig für Anfänger)

Wie Flex-Elemente behandelt werden

Praktisches Beispiel

4.4 Praxisbeispiel: Flexbox aktivieren und Standardverhalten beobachten

Übung: Erstes Flexbox-Layout beobachten

4.5 Häufige Fehler: Ursachen, warum Flexbox nicht wirkt

Fehler 1: `display: flex` nicht gesetzt

Fehler 2: Tippfehler bei `display: flex`

Fehler 3: Elemente sind keine direkten Kinder

Fehler 4: CSS wird nicht geladen

Fehler 5: Alte Browser (IE9 und älter)

Zusammenfassung

Übungsaufgaben

Aufgabe 4.1

Aufgabe 4.2

Aufgabe 4.3