Übung zu FlexBox

💡

Dauer: 35 Minuten
Übung: 25 Minuten
Besprechung: 10 Minuten

Bauen Sie dieses Kachelmuster bzw. Gemälde von Piet Mondrian mit einem Flexbox-Layout nach:

Mondrian Kacheln

Quelle: Wikipedia

⚠️

Bemerkungen:

  • Sie können dafür ein neues Projekt in VS Code erstellen oder Codepen verwenden.
  • Einzelne Kacheln können durch div-Elemente mit fester Breite (CSS-Eigenschaft width) und Höhe (height) definiert werden.
  • Die Hintergrundfarbe wird mit background-color bestimmt.
  • Denken Sie auch an die Ränder der Boxen.

(Info für Dozierende: Lösung siehe web-prog im git-Repository exercises)

🤖

Bild in ChatGPT hochladen und HTML/CSS generieren lassen.