Flexbox Gemüselayout-Design

Einführung

In diesem Projekt lernst du, wie du CSS-Eigenschaften von Flexbox verwenden kannst, um eine Anordnung von frischen Gemüsesorten in einem bestimmten Design zu erstellen. Am Ende dieses Projekts wirst du in der Lage sein, eine visuell ansprechende Anordnung mit Flexbox zu erstellen, was ein leistungsstarkes Werkzeug für die Erstellung von responsiven und dynamischen Web-Designs ist.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Anordnung mit CSS-Eigenschaften von Flexbox einrichtest
• Wie du die Gemüsesorten an den gewünschten Positionen innerhalb der Anordnung anordnet
• Wie du Flexbox-Eigenschaften wie display, justify-content, align-items und align-self verwendest, um die gewünschte Anordnung zu erreichen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine visuell ansprechende Anordnung mit Flexbox zu erstellen, einem leistungsstarken Werkzeug für die Erstellung von responsiven und dynamischen Web-Designs
• Zu verstehen, wie du CSS-Eigenschaften von Flexbox verwenden kannst, um eine flexible und responsive Anordnung zu erstellen
• Techniken zum Ausrichten und Verteilen von Elementen innerhalb eines Flexbox-Containers anzuwenden
• Strategien zur Positionierung von Elementen innerhalb einer Flexbox-Anordnung zu implementieren, um ein bestimmtes Design zu erreichen

Projekt einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

1. Öffne den Projektordner, der die folgenden Dateien und Verzeichnisse enthält:
   • css/style.css
   • index.html
2. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
3. Öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Layout einrichten

In diesem Schritt wirst du lernen, wie du CSS-Eigenschaften von Flexbox verwenden kannst, um das Layout für die Gemüseanordnung einzurichten.

1. Öffne die Datei style.css in deinem Editor.

2. Füge innerhalb des Selectors #box1 die folgenden CSS-Eigenschaften hinzu:

   #box1 {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

   Dies wird den Inhalt sowohl horizontal als auch vertikal im Container #box1 zentrieren.

3. Füge innerhalb des Selectors #box2 die folgenden CSS-Eigenschaften hinzu:

   #box2 {
     display: flex;
     justify-content: space-between;
   }
   

   Dies wird die Elemente im Container #box2 gleichmäßig verteilen, mit Abstand zwischen ihnen.

4. Füge innerhalb des Selectors #box2.item:nth-child(2) die folgende CSS-Eigenschaft hinzu:

   #box2.item:nth-child(2) {
     align-self: flex-end;
   }
   

   Dies wird das zweite Element in #box2 an den unteren Rand des Containers ausrichten.

Die Gemüsesorten anordnen

In diesem Schritt wirst du lernen, wie du CSS-Eigenschaften von Flexbox verwenden kannst, um die Gemüsesorten an den gewünschten Positionen zu ordnen.

1. Füge innerhalb des Selectors #box3 die folgenden CSS-Eigenschaften hinzu:

   #box3 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
   

   Dies wird eine Zeilenlayout für die Elemente in #box3 erstellen und sie gleichmäßig verteilen, mit Abstand zwischen ihnen.

2. Füge innerhalb des Selectors #box3.item:nth-child(2) die folgende CSS-Eigenschaft hinzu:

   #box3.item:nth-child(2) {
     align-self: center;
   }
   

   Dies wird das zweite Element in #box3 an den Mittelpunkt des Containers ausrichten.

3. Füge innerhalb des Selectors #box3.item:nth-child(3) die folgende CSS-Eigenschaft hinzu:

   #box3.item:nth-child(3) {
     align-self: flex-end;
   }
   

   Dies wird das dritte Element in #box3 an den unteren Rand des Containers ausrichten.

Nach Abschluss dieser Schritte sollte deine style.css-Datei der bereitgestellten Lösung entsprechen, und das Layout der Gemüsesorten sollte dem fertigen Beispiel entsprechen.

Das fertige Ergebnis ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.