CSS Flexbox Fruchtanordnungstutorial | Responsives Layoutdesign

Einführung

In diesem Projekt lernst du, wie du CSS Flexbox verwendest, um ein Layout für eine Fruchtanordnung zu erstellen. Du wirst lernen, wie du die Eigenschaften align-self und order verwendest, um die Früchte in den Schalen zu positionieren und zu arrangieren.

👀 Vorschau

Endgültiges Fruchtanordnungslayout

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die HTML-Struktur für die Fruchtanordnung einrichtest
Wie du die Eigenschaft align-self verwendest, um einzelne Flex-Elemente entlang der Querbene auszurichten
Wie du die Eigenschaft order verwendest, um die Reihenfolge von Flex-Elementen zu ändern
Wie du die Früchte mit Flexbox in das gewünschte Layout arrangierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

CSS Flexbox zu verwenden, um ein responsives und visuell ansprechendes Layout zu erstellen
Die Eigenschaften align-self und order anzuwenden, um die Positionierung und Anordnung von Elementen zu steuern
Mit CSS-Selektoren und -Eigenschaften umzugehen, um das gewünschte Design zu erreichen

Projektstruktur einrichten

In diesem Schritt lernst du, wie du die Projektstruktur 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.

unfertige Projektstruktur

Fruchtanordnung gestalten

In diesem Schritt lernst du, wie du die Eigenschaften align-self und order verwendest, um die Fruchtanordnung zu gestalten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei index.css in deinem Editor.
Wähle die Klasse .yellow aus und setze die Eigenschaft align-self auf flex-end.
Setze die Eigenschaft order der Klasse .yellow auf 1.

Deine index.css-Datei sollte jetzt so aussehen:

.yellow {
  align-self: flex-end;
  order: 1;
}

Die Eigenschaft align-self wird verwendet, um die einzelnen Flex-Elemente entlang der Querachse auszurichten und den Wert von align-items zu überschreiben. In diesem Fall setzen wir es auf flex-end, um die gelbe Frucht am Boden der Schale auszurichten.

Die Eigenschaft order wird verwendet, um die Reihenfolge der Flex-Elemente zu ändern. Wir setzen es auf 1 für die gelbe Frucht, was sie am Ende des Flex-Containers platziert.

Das fertige Ergebnis sieht wie folgt aus:

fertiges Fruchtanordnungsexempel

Zusammenfassung

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

Fruchtanordnung mit CSS Flexbox