Responsives flexibles Kartenlayout

Einführung

In diesem Projekt lernst du, wie du mithilfe von CSS Flexbox ein flexibles Kartenlayout erstellen kannst. Ein flexibles Kartenlayout ist ein häufiges Designmuster, das in Webseiten und Anwendungen verwendet wird, bei dem der Inhalt in einer reaktiven und anpassbaren gitterähnlichen Struktur dargestellt wird.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Elemente auswählst, die als flexible Boxen angeordnet werden sollen
• Wie du das Umbrechen von Flex-Elementen innerhalb des flexiblen Containers steuerst
• Wie du die Positionierung von Flex-Elementen auf der Hauptachse steuerst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• CSS Flexbox zum Erstellen eines reaktiven und flexiblen Layouts zu verwenden
• Techniken anzuwenden, um das Verhalten von Flex-Elementen innerhalb eines flexiblen Containers zu steuern
• Strategien zur Positionierung und Verteilung von Flex-Elementen entlang der Hauptachse umzusetzen

Projektstruktur einrichten

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

Um loszulegen, öffne den Editor. Du solltest zwei Dateien sehen - flexible_card.html und flexible_card.css in deinem Editor.

Klicke in der unteren rechten Ecke auf "Go Live", um Port 8080 zu öffnen und die flexible_card.html-Seite im Browser anzuschauen. Der Effekt wird wie folgt aussehen:

Flexible Layouts einrichten

In diesem Schritt lernst du, wie du Flex-Elemente für das Layout verwenden, um das gewünschte Ergebnis zu erzielen. Bitte folge den Schritten unten, um diesen Schritt abzuschließen:

1. Öffne die Datei flexible_card.css in deinem Editor.
2. Lasse den section-Selector in der CSS-Datei aufmerksam werden.
3. Füge der section-Selector die Eigenschaft display: flex; hinzu, um das <section>-Element zu einem flexiblen Container zu machen.

Der aktualisierte CSS-Code sollte so aussehen:

section {
  display: flex; /* Mache den Abschnitt zu einem flexiblen Container */
  /* Andere Stile */
}

4. Füge der section-Selector die Eigenschaft flex-wrap: wrap; hinzu, um es den Flex-Elementen zu ermöglichen, auf die nächste Zeile zu springen, wenn sie auf derselben Zeile nicht passen.

Der aktualisierte CSS-Code sollte so aussehen:

section {
  display: flex;
  flex-wrap: wrap; /* Ermögliche es den Flex-Elementen, auf die nächste Zeile zu springen */
  /* Andere Stile */
}

5. Füge der section-Selector die Eigenschaft justify-content: space-between; hinzu, um die Flex-Elemente gleichmäßig entlang der Hauptachse zu verteilen, mit gleichen Abständen zwischen ihnen.

Der aktualisierte CSS-Code sollte so aussehen:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Verteile die Flex-Elemente gleichmäßig entlang der Hauptachse */
  /* Andere Stile */
}

Nach Abschluss dieser drei Schritte sollte deine flexible_card.css-Datei so aussehen:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

Jetzt sollte dein flexibles Kartenlayout abgeschlossen sein und mit dem fertigen Ergebnis übereinstimmen, das im Beispiel gezeigt wird.

Zusammenfassung

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