Erstelle für jede Aufgabe eigene Klassen in der Datei style.css und wende sie auf die passenden Tags an.
📌 Dateistruktur: index.html + style.css
💡 Hauptregel: display: flex wird immer auf das Elternelement geschrieben, nicht auf
das Kindelement.
Ein hoher Block befindet sich links. Rechts stehen drei identische Blöcke übereinander. Der erste berührt den oberen Rand, der zweite ist zentriert, der dritte berührt den unteren Rand.
Eine Karte befindet sich in der Mitte eines großen Containers. In der Karte ist oben ein Block, darunter zwei Blöcke nebeneinander, und unten noch ein breiter Block.
Der Container ist in drei Spalten unterteilt. Links gibt es zwei Blöcke — oben und unten. In der Mitte befindet sich ein Block mittig. Rechts stehen drei identische Blöcke übereinander.
Ein breiter Block ist oben. Darunter befinden sich zwei Spalten. In der linken Spalte stehen drei identische Blöcke übereinander. In der rechten Spalte befindet sich ein hoher Block.
Der Container besteht aus zwei Teilen. Links befindet sich ein quadratischer Block. Rechts gibt es zwei Reihen. In jeder Reihe stehen zwei identische Blöcke nebeneinander.
px für alle Größen.Eine Karte befindet sich in der Mitte eines großen Containers. Oben stehen drei kleine Blöcke in einer Reihe. In der Mitte befindet sich ein breiter Block. Unten stehen wieder drei kleine Blöcke in einer Reihe.
Wiederhole die Anordnung der Blöcke.
px für alle Größen.
Wichtig:
Jede Klasse wird separat in style.css geschrieben.
Verwende nur HTML und CSS.
Übe die Eigenschaften:
display: flex,
flex-direction,
justify-content,
align-items.