Flexbox leicht gemacht (Elemente wie Magnete anordnen)

💡 Die Kernidee im Alltag:

"Früher war es extrem schwer, Dinge nebeneinander oder perfekt in die Mitte zu platzieren. Mit Flexbox ordnest du Elemente wie Magnete auf einer Schiene an."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Die magische Formel, um ALLES perfekt zu zentrieren:

.container {
  display: flex;
  justify-content: center; /* Waagerecht in die Mitte */
  align-items: center;     /* Senkrecht in die Mitte */
  gap: 16px;               /* Automatischer Abstand zwischen den Elementen */
}

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Claude 3.5 Sonnet

Golden Prompt für deinen Editor:

Erstelle ein horizontales Navbar-Layout mit Flexbox: Links ein Logo, rechts 3 Navigations-Links und ein CTA-Button, sauber verteilt mit justify-content: space-between.

Qualitäts-Prüfung: Prüfe, ob `justify-content: space-between` und `align-items: center` im CSS enthalten sind.

Vorherige Lektion: Das Box-Modell (Warum Abstände alles verändern)

Nächste Lektion: CSS Grid (Das Schachbrett-Muster für Layouts)

Interaktive Übung & lokaler Testlauf

Ordne die Buttons im `.toolbar` Container nebeneinander an mit `display: flex;` und einem Abstand von `gap: 12px;`.