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.
Vier identische Blöcke sind gleichmäßig über die gesamte Breite des Containers verteilt.
px für alle Größen.Drei Blöcke stehen übereinander und sind horizontal im Container zentriert.
Drei Blöcke stehen übereinander. Der erste berührt den oberen Rand, der zweite ist in der Mitte, der dritte berührt den unteren Rand.
px.Drei Blöcke befinden sich am unteren Rand des Containers.
px für alle Größen.Vier Blöcke befinden sich am unteren Rand des Containers und sind gleichmäßig verteilt.
px für alle Größen.Ein hoher Block befindet sich links. Rechts — zwei Blöcke übereinander. Der obere berührt den oberen Rand, der untere — den unteren.
Der Container besteht aus zwei Teilen. Links gibt es zwei Blöcke — einen oben, einen unten. Rechts befindet sich ein Block, genau in der Mitte platziert.
Eine Karte befindet sich in der Mitte eines großen Containers. In der Karte stehen drei Blöcke übereinander. Der obere berührt den oberen Rand der Karte, der untere — den unteren, und alle Blöcke sind horizontal zentriert.
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.