11 – Layout & Responsive 📱↔️🖥️

Baue Webseiten, die auf jedem Gerät perfekt aussehen

🧩 1. Warum moderne Layouts ohne Tabellen?

Früher baute man Layouts mit <table> – das war starr, unzugänglich und schwer zu warten.

Heute verwenden wir Flexbox und Grid – sie sind:

✅ flexibel – passen sich an Bildschirmgröße an
✅ barrierefrei – Screenreader verstehen die Struktur
✅ einfach – mit wenigen CSS-Befehlen machbar

In diesem Kapitel lernst du Flexbox – das wichtigste Werkzeug für eindimensionale Layouts (Zeilen oder Spalten).

📚 Vertiefung auf W3Schools – Flexbox

W3Schools erklärt Flexbox Schritt für Schritt – mit interaktiven Beispielen und Visualisierung der Achsen.

🔗 W3Schools: CSS Flexbox

🧱 2. Flexbox – der intelligente Baukasten

Stell dir Flexbox wie einen intelligenten Baukasten vor:

Der Behälter (Flex-Container) sagt: „Ordnet euch an!“
Die Teile darin (Flex-Items) folgen den Anweisungen automatisch.

Du brauchst nur eine CSS-Eigenschaft, um das Ganze zu aktivieren:

/* Elternelement wird zum Flex-Container */
.flex-container {
  display: flex;
}

Sobald du das tust, ändern sich die Regeln:

Alle direkten Kinder werden zu Flex-Items
Sie werden standardmäßig horizontal in einer Zeile angeordnet
Block/Inline-Unterschiede gelten nicht mehr

↔️↕️ 3. Die zwei Achsen – Hauptstraße und Seitenstraße

Flexbox arbeitet mit zwei Achsen:

Hauptachse (main axis): Standardmäßig horizontal (links → rechts)
Kreuzachse (cross axis): Senkrecht dazu – also vertikal (oben → unten)

Mit diesen beiden Achsen steuerst du alles:

Eigenschaft	Wirkung
`justify-content`	Verteilung entlang der Hauptachse (z. B. zentriert, verteilt)
`align-items`	Ausrichtung entlang der Kreuzachse (z. B. oben, mittig)
`flex-direction`	Ändert die Richtung der Hauptachse (z. B. `column` für vertikale Anordnung)

🧪 4. Praxis: Einfache Flexbox-Demo

Drei Karten teilen sich den Platz – automatisch und gleichmäßig:

Drei Elemente teilen sich den Platz – automatisch!

So funktioniert der Code:

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

.flex-container {
  display: flex;      /* Aktiviert Flexbox */
  gap: 12px;         /* Abstand zwischen Items */
}

.flex-item {
  flex: 1;           /* Jedes Item bekommt gleichen Platz */
  padding: 16px;
  background: #3498db;
  color: white;
  text-align: center;
}

💡 Der Schlüssel ist flex: 1:
Es sagt: „Teile den verfügbaren Platz gleichmäßig auf alle Items auf.“
Ohne diese Regel würden die Items nur so breit sein wie ihr Inhalt.

📱 5. Mobile-First mit Flexbox

Auf dem Handy sollen die Karten untereinander stehen, auf dem Desktop nebeneinander.

So geht’s – mit einer Media Query:

.flex-container {
  display: flex;
  flex-direction: column; /* Mobile: vertikal */
  gap: 12px;
}

/* Ab 768px (Tablet): horizontal */
@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
  }
}

⚠️ Voraussetzung: Vergiss nicht den Viewport-Meta-Tag in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

🧱 6. div, class, id – gezielt stylen

<div> ist dein universeller Container – nutze ihn, wenn kein semantisches Element passt.

class für wiederverwendbare Stile, id für eindeutige Bereiche (z. B. #header).

Und denke an die Spezifitäts-Hierarchie:

Element: p → schwach
Klasse: .karte → stärker
ID: #header → noch stärker
Inline-Style → am stärksten (vermeiden!)

🧠 7. KI als Lernpartner – guter Prompt

❌ Schlecht: „Mach mir ein responsives Layout.“ ✅ Gut: „Kannst du mir ein Mobile-First-Flexbox-Layout zeigen, das auf Desktop drei Spalten und auf Mobil eine Spalte anzeigt? Erkläre dabei flex-direction, justify-content und gap – und warum flex: 1 wichtig ist.“