Intro

Was ihr nach diesem Kapitel können solltet

Im CSS-Kapitel habt ihr ein Design einspaltig nachgebaut - Farben, Schriften, Abstände, aber ohne mehrspaltiges Layout. Jetzt kommt der fehlende Baustein dazu.

Flexbox einsetzen, um Elemente in einer Richtung anzuordnen (Reihe oder Spalte) - z.B. für Navigationsleisten, Card-Reihen, zentrierte Inhalte
CSS Grid einsetzen, um ein zweidimensionales Raster aus Zeilen und Spalten zu bauen - z.B. für ein Seiten-Layout mit Header, Sidebar, Content, Footer
Entscheiden können, wann Flexbox und wann Grid die bessere Wahl ist
Native, interaktive HTML-Elemente kennen, die früher JavaScript brauchten: <details>, <dialog> und das Popover-Attribut

Bisher: einspaltig, mit fixer Reihenfolge von oben nach unten (Normal Flow) Jetzt: mehrspaltig, mit Kontrolle über Zeilen UND Spalten

Recap: der Normal Flow

Ohne display: flex oder display: grid ordnet der Browser Elemente im Normal Flow an - das kennt ihr schon aus dem display-Abschnitt des CSS-Kapitels:

Normal Flow auf Laptop und Smartphone

Block-Elemente (div, section, p, …) stehen untereinander
Inline-Elemente (span, a, …) fließen nebeneinander im Text
Die Reihenfolge im HTML bestimmt die Reihenfolge auf der Seite - eine Spalte, die auf schmalen wie breiten Bildschirmen einfach unterschiedlich lang ist