11 – Layout & Responsive  📱↔️🖥️

🎯 1. Einleitung & W3Schools

In Kapitel 11 hast du gelernt, wie man mit Flexbox flexible Layouts erstellt, Klassen und IDs sinnvoll verwendet und Media Queries für verschiedene Bildschirme nutzt.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🔗 W3Schools – CSS Flexbox
🔗 W3Schools – Responsive Media Queries

🧠 2. KI-Prompt-Training – flexibel denken

Deine Aufgabe: Formuliere einen Prompt, der kein Layout-CSS liefert, sondern dir hilft, zu verstehen, wie Flexbox funktioniert.

❌ Vermeide: „Gib mir ein Flexbox-Layout für drei Spalten.“ ✅ Fragen, die denken erzwingen:

• „Warum teilen sich drei flex: 1-Elemente den Platz gleichmäßig?“
• „Erkläre mir den Unterschied zwischen flex-direction: row und column.“
• „Warum ist display: flex mächtiger als alte Tabellen-Layouts?“

🔍 Aufgabe 1: Analysiere – nicht baue!

Ein Schüler hat folgendes CSS geschrieben:

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-item {
  flex: 1;
}

Schreibe (auf Papier oder in Textdatei):

1. Wie sind die Elemente angeordnet – horizontal oder vertikal?
2. Warum füllt flex: 1 den verfügbaren Platz – und was passiert ohne diese Regel?
3. Welche CSS-Regel müsste man ändern, damit die Elemente **nebeneinander** erscheinen?
4. Warum ist Flexbox besonders gut für responsives Design geeignet?

🧱 Aufgabe 2: Layout bewusst gestalten – erst nach der Analyse!

Erstelle eine HTML-Datei layout.html mit folgenden Anforderungen:

• Einen <div class="container"> mit drei Kind-Elementen (box1, box2, box3)
• Eine externe CSS-Datei css/flex.css, die:
  • den Container zu einem Flex-Container macht
  • die Boxen **nebeneinander** anordnet
  • gleichen Platz für alle Boxen sicherstellt
  • einen Abstand (gap) zwischen den Boxen setzt
• Keine absoluten Größen wie width: 200px verwenden – alles soll flexibel sein!