Kapitel 16: Erweiterungsmöglichkeiten

16.1 Unterschied zwischen Flexbox und Grid-Layout (Auswahl-Kriterien)

Was ist CSS Grid?

CSS Grid Layout ist ein zweidimensionales Layout-System (Zeilen UND Spalten gleichzeitig).

Flexbox vs. Grid:

Merkmal	Flexbox	CSS Grid
Dimension	1D (entweder Zeile ODER Spalte)	2D (Zeilen UND Spalten gleichzeitig)
Ausrichtung	Hauptachse + Querachse	Zeilen + Spalten
Ideal für	Lineare Layouts (Navigation, Listen)	Komplexe Layouts (Grid-Galerien, Gesamtlayout)
Überlappung	Schwierig	Einfach (Elemente können sich über mehrere Zellen erstrecken)

---

Wann Flexbox, wann Grid?

Verwende Flexbox für:

• ✅ Navigationen
• ✅ Karten-Layouts (1D, umbrechend)
• ✅ Formular-Layouts
• ✅ Komponenten-Ausrichtung
• ✅ "Eindimensionale" Layouts

Verwende Grid für:

• ✅ Gesamtlayout (Header, Main, Footer, Sidebar)
• ✅ Komplexe Grid-Galerien
• ✅ Layouts mit Überlappungen
• ✅ "Zweidimensionale" Layouts

---

Praxisbeispiel: Flexbox vs. Grid

Szenario 1: Navigation (Flexbox ist besser)

/* Flexbox: Perfekt für Navigation! */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Szenario 2: Gesamtlayout (Grid ist besser)

/* Grid: Perfekt für Gesamtlayout! */
.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr 150px;  /* 3 Spalten */
  grid-template-rows: auto 1fr auto;         /* 3 Zeilen */
  min-height: 100vh;
}

.header { grid-area: 1 / 1 / 2 / 4; }  /* Zeile 1, alle Spalten */
.sidebar { grid-area: 2 / 1 / 3 / 2; } /* Zeile 2, Spalte 1 */
.main { grid-area: 2 / 2 / 3 / 3; }    /* Zeile 2, Spalte 2 */
.ads { grid-area: 2 / 3 / 3 / 4; }      /* Zeile 2, Spalte 3 */
.footer { grid-area: 3 / 1 / 4 / 4; }  /* Zeile 3, alle Spalten */

---

16.2 Komplexe Layouts (Flexbox + Grid kombinieren)

Tipp: Kombiniere beide!

Strategie:

1. Gesamtlayout mit Grid erstellen
2. Komponenten innerhalb mit Flexbox ausrichten

Beispiel:

<div class="page-layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Hauptinhalt</main>
  <footer class="footer">Footer</footer>
</div>

/* Gesamtlayout mit Grid */
.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-column: 1 / 3; }
.sidebar { grid-column: 1 / 2; }
.main { grid-column: 2 / 3; }
.footer { grid-column: 1 / 3; }

/* Komponenten mit Flexbox */
.header {
  display: flex;            /* JETZT Flexbox! */
  justify-content: space-between;
  align-items: center;
}

.main {
  display: flex;            /* JETZT Flexbox! */
  flex-wrap: wrap;
  gap: 20px;
}

---

16.3 Flexbox in Frontend-Frameworks (Vue/React Komponenten-Layout)

Flexbox in Vue.js

Beispiel: Vue-Komponente mit Flexbox

<template>
  <div class="navbar">
    <div class="logo">Logo</div>
    <div class="nav-links">
      <a href="#">Home</a>
      <a href="#">Über uns</a>
    </div>
  </div>
</template>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}
</style>

---

Flexbox in React

Beispiel: React-Komponente mit Flexbox

import React from 'react';
import './Navbar.css';

function Navbar() {
  return (
    <nav className="navbar">
      <div className="logo">Logo</div>
      <div className="nav-links">
        <a href="#">Home</a>
        <a href="#">Über uns</a>
      </div>
    </nav>
  );
}

export default Navbar;

/* Navbar.css */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 20px;
}

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

---

Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Unterschied zwischen Flexbox (1D) und Grid (2D)
• ✅ Wann Flexbox vs. Grid zu verwenden ist
• ✅ Flexbox + Grid kombinieren
• ✅ Flexbox in Vue/React Komponenten

Nächstes Kapitel: In Kapitel 17 lernen wir Lernressourcen kennen.

---

Übungsaufgaben

Aufgabe 16.1

Erstelle ein Layout mit Grid (3 Spalten, 3 Zeilen). Verwende dann Flexbox innerhalb der "Main"-Zelle für Karten-Layout.

Aufgabe 16.2

Erstelle eine Vue/React-Komponente (je nach Präferenz) mit einer Flexbox-Navigation.

Aufgabe 16.3

Erkläre einem Freund (oder dir selbst) den Unterschied zwischen Flexbox und Grid. Wann würdest du was verwenden?