Erstelle einen visuell ansprechenden Obstteller mit CSS Flexbox

Einführung

In diesem Projekt lernst du, wie du mithilfe von CSS Flexbox einen visuell ansprechenden Obstteller gestalten kannst. Ziel ist es, die Früchte derselben Farbe in der Mitte ihrer entsprechenden Farbtafeln zu positionieren, um eine harmonische und ästhetisch ansprechende Darstellung zu schaffen.

👀 Vorschau

Fertige Obstteller-Layout

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du einen Flex-Container einrichtest, um die Früchte auf dem Teller zu organisieren
Wie du die Früchte derselben Farbe in der Mitte ihrer entsprechenden Farbtafeln positionierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

CSS Flexbox verwenden, um ein gitterähnliches Layout zu erstellen
Elemente innerhalb eines Flex-Containers zentrieren und ausrichten
Elemente auf einer Webseite effektiv zu organisieren und in einer visuell ansprechenden Weise darzustellen

Projektsstruktur einrichten

In diesem Schritt lernst du, wie du die Projektsstruktur einrichtest.

Um loszulegen, öffne den Editor. Du solltest einige Dateien sehen - index.html, style.css und images in deinem Editor.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke des WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Vorschau auf die unfertige Projektsstruktur

Den Flex-Container einrichten

In diesem Schritt lernst du, wie du den Flex-Container einrichtest, um die Früchte auf dem Teller zu organisieren.

Öffne die Datei index.css in deinem Code-Editor.
Füge innerhalb des Selectors #pond die folgenden CSS-Eigenschaften hinzu:

#pond {
  /* TODO: Füge hier deinen CSS-Code hinzu */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Die Eigenschaft display: flex setzt das Element #pond als Flex-Container, was uns ermöglicht, das Flexbox-Layout zu verwenden, um die Früchte zu positionieren.

Die Eigenschaft flex-direction: column stapelt die Flex-Elemente (die Fruchtbehälter) vertikal.

Die Eigenschaft flex-wrap: wrap ermöglicht es den Flex-Elementen, auf die nächste Zeile zu springen, wenn sie auf der aktuellen Zeile nicht passen.

Das fertige Ergebnis sieht wie folgt aus:

Endresultat des Flex-Containers