Kapitel 10: Abstände zwischen Elementen steuern (gap)

10.1 gap: Abstände zwischen Flex-Elementen

Definition:gap ist eine moderne CSS-Eigenschaft, die den Abstand zwischen Flex-Elementen (sowohl horizontal als auch vertikal) steuert. Sie ersetzt die Notwendigkeit, margin für Abstände zu verwenden.

Vorteile gegenüber margin:

• ✅ Gleichmäßige Abstände ohne komplexe Berechnungen
• ✅ Keine überflüssigen Ränder an den äußeren Rändern
• ✅ Einfacher und intuitiver als margin-Hacks
• ✅ Getrennte Steuerung von horizontalen und vertikalen Abständen

Syntax:

.container {
  display: flex;
  gap: <wert>;           /* Gleicher Abstand horizontal und vertikal */
  /* oder */
  gap: <wert1> <wert2>;  /* Erst vertikal, dann horizontal */
  /* oder */
  row-gap: <wert>;       /* Nur vertikaler Abstand (für Zeilen) */
  column-gap: <wert>;    /* Nur horizontaler Abstand */
}

---

10.2 Häufige Verwendung: gap, row-gap, column-gap

1. gap (Kurzschreibweise)

Ein Wert (gleichmäßiger Abstand):

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  /* 20px Abstand zwischen ALLEN Elementen (horizontal & vertikal) */
}

Zwei Werte (vertikal und horizontal):

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;  /* 10px vertikaler Abstand, 20px horizontaler Abstand */
}

2. row-gap (Nur vertikaler Abstand)

Verwendung:

• Bei flex-direction: row (Standard)
• Steuert den vertikalen Abstand zwischen den Zeilen

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;  /* Nur vertikaler Abstand zwischen Zeilen */
  column-gap: 0;   /* Kein horizontaler Abstand */
}

Ergebnis:

┌────────────────────────────────────┐
│ [Element 1] [Element 2] [Element 3] │
│   ↑ 15px ↑                         │
│ [Element 4] [Element 5]           │
└────────────────────────────────────┘

3. column-gap (Nur horizontaler Abstand)

Verwendung:

• Bei flex-direction: row (Standard)
• Steuert den horizontalen Abstand zwischen den Elementen in einer Zeile

CSS:

.container {
  display: flex;
  column-gap: 20px;  /* Nur horizontaler Abstand */
  row-gap: 0;        /* Kein vertikaler Abstand */
}

Ergebnis:

┌────────────────────────────────────┐
│ [1]   ↑20px↑   [2]   ↑20px↑   [3] │
└────────────────────────────────────┘

---

10.3 Praxisbeispiel: Abstände mit gap setzen

Szenario 1: Karten-Layout mit gleichmäßigen Abständen

HTML:

<div class="card-container">
  <div class="card">Karte 1</div>
  <div class="card">Karte 2</div>
  <div class="card">Karte 3</div>
  <div class="card">Karte 4</div>
  <div class="card">Karte 5</div>
</div>

CSS (ohne gap - Alte Methode mit margin):

.card-container {
  display: flex;
  flex-wrap: wrap;
  /* Kein gap! */
}

.card {
  flex: 1 0 200px;
  margin: 10px;  /* Problem: Äußerer Rand entsteht! */
  padding: 20px;
  background-color: lightblue;
}

Problem mit margin:

• Karten haben Abstände von 10px auf allen Seiten
• ABER: Auch außen entsteht ein 10px Rand (undlicher Look)

CSS (mit gap - Moderne Methode):

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  /* Perfekter, gleichmäßiger Abstand */
  padding: 20px;  /* Padding für den Container, nicht margin für Karten */
}

.card {
  flex: 1 0 200px;
  padding: 20px;
  background-color: lightblue;
  /* KEIN margin mehr! */
}

Vorteil:

• ✅ Karten haben gleichmäßige Abstände (20px) zueinander
• ✅ Kein überflüssiger Rand außen (weil padding am Container verwendet wird)
• ✅ Sauberer, profesioneller Look

Szenario 2: Navigation mit Abständen

HTML:

<nav class="navbar">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">Über uns</a>
  <a href="#" class="nav-link">Kontakt</a>
</nav>

CSS (mit gap):

.navbar {
  display: flex;
  align-items: center;
  gap: 20px;  /* 20px Abstand zwischen Links */
  padding: 20px;
  background-color: #333;
}

.nav-link {
  color: white;
  text-decoration: none;
}

Ergebnis:

┌────────────────────────────────────┐
│ Home  ↑20px↑  Über uns  ↑20px↑  Kontakt │
└────────────────────────────────────┘

Vergleich mit margin:

/* Alte Methode (problematisch) */
.nav-link {
  margin-right: 20px;  /* Problem: Letztes Element hat auch rechten Rand */
}

.nav-link:last-child {
  margin-right: 0;  /* Hack: Letztes Element zurücksetzen */
}

Vorteil von gap:

• ✅ Keine :last-child oder :first-child Hacks mehr!
• ✅ Sauberer, leichter zu wartender Code

---

10.4 Kompatibilität (Browser-Support)

Aktueller Stand (2024):

Unterstützte Browser:

• ✅ Chrome 84+ (Juli 2020)
• ✅ Firefox 63+ (Oktober 2018)
• ✅ Safari 14.1+ (April 2021)
• ✅ Edge 84+ (Juli 2020)
• ✅ Opera 70+ (November 2020)

Nicht unterstützt:

• ❌ Internet Explorer (alle Versionen)
• ❌ Ältere Browser (vor oben genannten Versionen)

Fallback für alte Browser

Methode 1: @supports verwenden

.container {
  display: flex;
  flex-wrap: wrap;
  
  /* Fallback für alte Browser: margin verwenden */
  margin: -10px;  /* Negativer Außenrand, um padding auszugleichen */
}

.item {
  /* Fallback */
  margin: 10px;
}

/* Moderne Browser: gap verwenden */
@supports (gap: 10px) {
  .container {
    gap: 20px;
    margin: 0;  /* Fallback-Margin zurücksetzen */
  }
  
  .item {
    margin: 0;  /* Fallback-Margin zurücksetzen */
  }
}

Methode 2: margin als Fallback (einfacher)

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

.item {
  flex: 1 0 200px;
  margin: 10px;  /* Fallback für alte Browser */
}

/* Moderne Browser: margin ignorieren und gap verwenden */
@supports (gap: 10px) {
  .container {
    gap: 20px;
  }
  
  .item {
    margin: 0;
  }
}

Empfehlung:

Heutzutage ist gap sicher zu verwenden, da die meisten Nutzer moderne Browser verwenden. Nur wenn du IE11 oder sehr alte Versionen unterstützen musst, ist ein Fallback notwendig.

---

Praxisübung: gap meistern

Aufgabe 1: Einfaches Karten-Layout

Ziel: Erstelle ein Layout mit 6 Karten, die:

• In einer Zeile umbrechen (flex-wrap: wrap)
• Einen gleichmäßigen Abstand von 15px haben (gap: 15px)
• Mindestens 250px breit sind (flex-basis: 250px)

Lösung:

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px;
}

.card {
  flex: 1 0 250px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

Aufgabe 2: Navigation mit unterschiedlichen Abständen

Ziel: Erstelle eine Navigation, bei der:

• Horizontale Abstände 20px betragen (column-gap: 20px)
• Vertikale Abstände (falls Umbruch) 10px betragen (row-gap: 10px)

Lösung:

.navbar {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 20px;
  padding: 20px;
  background-color: #333;
}

.nav-link {
  color: white;
  text-decoration: none;
}

---

Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ gap: Abstände zwischen Flex-Elementen steuern (gleichmäßig)
• ✅ row-gap: Nur vertikalen Abstand steuern
• ✅ column-gap: Nur horizontalen Abstand steuern
• ✅ Praxisbeispiele für Karten-Layouts und Navigationen
• ✅ Browser-Kompatibilität und Fallbacks für alte Browser

Nächstes Kapitel: In Kapitel 11 lernen wir Grundlegende Praxisbeispiele kennen: Horizontales Zentrieren, Vertikales Zentrieren, Navigationsleisten und Karten-Layouts.

---

Übungsaufgaben

Aufgabe 10.1

Erstelle einen Container mit 6 Elementen. Verwende gap: 20px, sodass alle Elemente gleiche Abstände haben. Beobachte, dass keine äußeren Ränder entstehen.

Aufgabe 10.2

Erstelle eine Navigation mit 4 Links. Verwende column-gap: 30px, um nur horizontale Abstände zu setzen.

Aufgabe 10.3

Erstelle ein Karten-Layout mit flex-wrap: wrap. Verwende gap: 15px 30px (15px vertikal, 30px horizontal). Beobachte den Unterschied zwischen den Zeilen und den Elementen in einer Zeile.

Aufgabe 10.4 (Für Fortgeschrittene)

Erstelle ein Layout, das gap verwendet, aber für IE11 funktionieren soll. Schreibe einen Fallback mit margin.