Kapitel 9: Größensteuerung von Elementen (flex-grow + flex-shrink + flex-basis)

9.1 flex-grow: Vergrößerungsfaktor (Verfügbaren Platz aufteilen)

Definition:flex-grow bestimmt, wie viel überschüssigen Platz ein Flex-Element einnehmen darf. Der Wert ist ein Verhältnis.

Standardwert:

• flex-grow: 0 (Element vergrößert sich nicht)

Syntax:

.item {
  flex-grow: <non-negative zahl>;  /* 0, 1, 2, 3... */
}

---

Praxisbeispiel: Verfügbaren Platz aufteilen

HTML:

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

CSS (alle flex-grow: 0 - Standard):

.container {
  display: flex;
  border: 2px solid #333;
  padding: 10px;
  width: 600px;  /* Feste Breite für Demonstration */
}

.item {
  flex-grow: 0;  /* Standard: Nicht vergrößern */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
  width: 100px;  /* Feste Breite */
}

Ergebnis (mit flex-grow: 0):

┌────────────────────────────────────┐
│ [Element 1] [Element 2] [Element 3]         │  ← Nicht vergrößert
└────────────────────────────────────┘

Mit flex-grow: 1 (Alle gleichmäßig vergrößern)

CSS:

.item {
  flex-grow: 1;  /* JETZT: Alle vergrößern sich gleichmäßig */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis (mit flex-grow: 1):

┌────────────────────────────────────┐
│ [  Element 1  ] [  Element 2  ] [  Element 3  ] │  ← Gleichmäßig vergrößert
└────────────────────────────────────┘

Unterschiedliche flex-grow Werte

CSS:

.item1 {
  flex-grow: 1;  /* 1 Teil */
}

.item2 {
  flex-grow: 2;  /* 2 Teile (doppelt so groß wie item1) */
}

.item3 {
  flex-grow: 1;  /* 1 Teil */
}

Ergebnis (1:2:1 Verhältnis):

┌────────────────────────────────────┐
│ [ Element 1 ] [   Element 2   ] [ Element 3 ] │  ← 1:2:1 Verhältnis
└────────────────────────────────────┘

Berechnung:

• Gesamt: 1 + 2 + 1 = 4 Teile
• Item 1: 1/4 des verfügbaren Platzes
• Item 2: 2/4 des verfügbaren Platzes
• Item 3: 1/4 des verfügbaren Platzes

---

9.2 flex-shrink: Verkleinerungsfaktor (Überlauf verhindern)

Definition:flex-shrink bestimmt, wie stark ein Flex-Element schrumpfen darf, wenn der Platz im Container nicht ausreicht.

Standardwert:

• flex-shrink: 1 (Element darf schrumpfen)

Syntax:

.item {
  flex-shrink: <non-negative zahl>;  /* 0, 1, 2, 3... */
}

---

Praxisbeispiel: Elemente beim Überlauf schrumpfen lassen

HTML:

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

CSS (alle flex-shrink: 1 - Standard):

.container {
  display: flex;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;  /* Begrenzte Breite */
}

.item {
  flex-shrink: 1;  /* Standard: Darf schrumpfen */
  width: 200px;  /* Eigentlich zu breit für Container */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis (mit flex-shrink: 1):

• Elemente schrumpfen automatisch, um in den Container zu passen

flex-shrink: 0 (Nicht schrumpfen lassen)

CSS:

.item {
  flex-shrink: 0;  /* NICHT schrumpfen! */
  width: 200px;
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis (mit flex-shrink: 0):

• Elemente behalten ihre 200px Breite
• Überlaufen den Container (Overflow)

Unterschiedliche flex-shrink Werte

CSS:

.item1 {
  flex-shrink: 1;  /* Darf schrumpfen */
  width: 200px;
}

.item2 {
  flex-shrink: 0;  /* Darf NICHT schrumpfen */
  width: 200px;
}

.item3 {
  flex-shrink: 2;  /* Schrumpft stärker als item1 */
  width: 200px;
}

Ergebnis:

• Item 1 schrumpft normal
• Item 2 bleibt bei 200px (überläuft möglicherweise)
• Item 3 schrumpft stärker als item1

---

9.3 flex-basis: Ausgangsgröße auf der Hauptachse

Definition:flex-basis bestimmt die Ausgangsgröße eines Flex-Elements auf der Hauptachse, bevor überschüssiger Platz verteilt wird.

Standardwert:

• flex-basis: auto (Größe basiert auf Inhalt oder width/height)

Syntax:

.item {
  flex-basis: <length> | auto;
}

---

Praxisbeispiel: Ausgangsgröße festlegen

HTML:

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

CSS (flex-basis: auto - Standard):

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

.item {
  flex-basis: auto;  /* Standard: Größe basiert auf Inhalt */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

• Elemente sind so breit wie ihr Inhalt

flex-basis: 0 (Platz neu verteilen)

CSS:

.item {
  flex-basis: 0;  /* Alle starten bei 0, dann Platz verteilen */
  flex-grow: 1;   /* Alle wachsen gleichmäßig */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

• Alle Elemente sind exakt gleich breit (weil flex-basis: 0)

flex-basis mit festen Werten

CSS:

.item {
  flex-basis: 200px;  /* Mindestens 200px breit */
  flex-grow: 1;       /* Aber kann wachsen */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

• Elemente sind mindestens 200px breit
• Wenn Platz da ist, wachsen sie gleichmäßig

Unterschied zwischen flex-basis und width/height

Wichtig:

Wenn flex-basis gesetzt ist, ignoriert das Flex-Element width (bei row) oder height (bei column).

CSS (flex-basis gewinnt):

.item {
  width: 500px;        /* WIRD IGNORIERT! */
  flex-basis: 200px;    /* DIESES wird verwendet */
}

CSS (ohne flex-basis → width wird verwendet):

.item {
  width: 500px;        /* WIRD VERWENDET, weil kein flex-basis */
  flex-basis: auto;     /* Standard: width wird verwendet */
}

---

9.4 flex: Kurzschreibweise (HÄUFIG VERWENDET!)

Definition:flex ist eine Kurzschreibweise für flex-grow, flex-shrink und flex-basis.

Syntax:

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

---

Häufige Kurzschreibweisen

1. flex: 1 (Sehr häufig!)

Bedeutung:

.item {
  flex: 1;  /* Gleich wie: flex: 1 1 0% */
}

Ergebnis:

• Element wächst gleichmäßig (flex-grow: 1)
• Element darf schrumpfen (flex-shrink: 1)
• Element startet bei 0% (flex-basis: 0%) → Alle gleich breit!

Anwendungsfall: Navigation mit gleich breiten Links

.nav-link {
  flex: 1;  /* Alle Links gleich breit */
  text-align: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

2. flex: 0 0 auto (fixierte Größe)

Bedeutung:

.item {
  flex: 0 0 auto;  /* Gleich wie: wächst nicht, schrumpft nicht, Größe auto */
}

Ergebnis:

• Element behält seine natürliche Größe
• Wird nicht größer oder kleiner

Anwendungsfall: Logo in Navigation (soll nicht wachsen)

.logo {
  flex: 0 0 auto;  /* Logo behält seine Größe */
}

3. flex: none (Kompakt für 0 0 auto)

Bedeutung:

.item {
  flex: none;  /* Gleich wie: flex: 0 0 auto */
}

4. flex: 2 1 200px (Benutzerdefiniert)

Bedeutung:

.item {
  flex: 2 1 200px;  /* Wächst mit Faktor 2, schrumpft mit 1, startet bei 200px */
}

---

9.5 Anfängerfehler: Konflikt zwischen flex-Eigenschaften und width/height

Problem 1: width wird ignoriert

Symptom:

• width wird nicht angewendet, obwohl gesetzt

Ursache:

.item {
  width: 500px;     /* WIRD IGNORIERT! */
  flex-basis: 200px; /* flex-basis hat Vorrang */
}

Lösung 1: flex-basis verwenden

.item {
  /* width: 500px; → Weglassen */
  flex-basis: 500px;  /* JETZT wird dieser Wert verwendet */
}

Lösung 2: flex: none verwenden (wenn Größe fix bleiben soll)

.item {
  width: 500px;
  flex: none;  /* Verhindert, dass flex-basis width überschreibt */
}

Problem 2: flex-basis und width gleichzeitig

Symptom:

• Unvorhersehbares Verhalten

Ursache:

.item {
  width: 200px;
  flex-basis: 300px;  /* WELCHER Wert gilt? */
}

Lösung:

• Entweder width oder flex-basis verwenden, nicht beide!
• Wenn flex-basis gesetzt ist → width ignorieren
• Wenn flex-basis: auto → width wird verwendet

Problem 3: flex: 1 und width gleichzeitig

Symptom:

• width scheint nicht zu wirken

Ursache:

.item {
  flex: 1;        /* flex-basis wird auf 0% gesetzt → wächst gleichmäßig */
  width: 300px;    /* WIRD IGNORIERT! */
}

Lösung:

.item {
  flex: 1 1 300px;  /* flex-basis auf 300px setzen */
  /* Oder */
  flex: 1;
  min-width: 300px;  /* Mindestbreite setzen */
}

---

Praxisbeispiel: Größensteuerung meistern

Szenario: Drei-spaltiges Layout

HTML:

<div class="layout">
  <aside class="sidebar">Seitenleiste</aside>
  <main class="content">Hauptinhalt</main>
  <aside class="ads">Werbung</aside>
</div>

CSS (ohne flex):

.layout {
  display: flex;
}

.sidebar {
  width: 200px;  /* Feste Breite */
}

.content {
  width: 100%;    /* Soll restlichen Platz einnehmen */
}

.ads {
  width: 150px;   /* Feste Breite */
}

Problem:

• .content wird nicht automatisch größer

CSS (mit flex):

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 200px;  /* Nicht wachsen, nicht schrumpfen, 200px breit */
}

.content {
  flex: 1;           /* Restlichen Platz einnehmen */
}

.ads {
  flex: 0 0 150px;  /* Nicht wachsen, nicht schrumpfen, 150px breit */
}

Ergebnis:

• .sidebar: Fix 200px
• .ads: Fix 150px
• .content: Nimmt den restlichen Platz ein

---

Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ flex-grow: Vergrößerungsfaktor (Verfügbaren Platz aufteilen)
• ✅ flex-shrink: Verkleinerungsfaktor (Überlauf verhindern)
• ✅ flex-basis: Ausgangsgröße auf der Hauptachse
• ✅ flex: Kurzschreibweise (flex: 1, flex: none, etc.)
• ✅ Häufige Anfängerfehler und deren Behebung

Nächstes Kapitel: In Kapitel 10 lernen wir gap kennen (Abstände zwischen Elementen steuern).

---

Übungsaufgaben

Aufgabe 9.1

Erstelle einen Container mit 3 Elementen. Verwende flex-grow, sodass das 2. Element doppelt so breit ist wie die anderen beiden.

Aufgabe 9.2

Erstelle einen Container mit 3 Elementen. Setze flex-shrink: 0 für das 2. Element, sodass es nicht schrumpft, wenn der Platz knapp wird.

Aufgabe 9.3

Erstelle ein drei-spaltiges Layout mit Sidebar (200px), Content (restlicher Platz) und Ads (150px). Verwende flex.

Aufgabe 9.4

Erstelle 3 Elemente und gebe ihnen flex-basis: 200px. Beobachte, wie sie sich verhalten, wenn der Container breiter wird (mit flex-grow: 1).