Responsives Würfel-Layout | Flexbox CSS-Tutorial

Einführung

In diesem Projekt lernst du, wie du mithilfe von Flexbox CSS ein responsives Würfel-Layout erstellen kannst. Ziel ist es, eine Reihe von Würfeln mit unterschiedlichen Punktenmustern gemäß bestimmten Layoutanforderungen zu arrangieren.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Grundstruktur des Würfel-Layouts mit HTML und CSS einrichtest
Wie du Flexbox-Eigenschaften wie justify-content, align-items, flex-direction und align-self verwendest, um die Punkte innerhalb jedes Würfels zu positionieren
Wie du fortgeschrittene Flexbox-Techniken wie flex-wrap und flex-basis implementierst, um das gewünschte Layout zu erstellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Flexbox verwenden, um komplexe und responsive Layouts zu erstellen
Die verschiedenen Flexbox-Eigenschaften verstehen und effektiv anzuwenden
Problemlösefähigkeiten entwickeln, indem du Schritt-für-Schritt-Anweisungen folgst und das erforderliche Layout implementierst

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300064{{"Responsives Würfel-Layout mit Flexbox"}} css/box_model -.-> lab-300064{{"Responsives Würfel-Layout mit Flexbox"}} css/display_property -.-> lab-300064{{"Responsives Würfel-Layout mit Flexbox"}} css/positioning -.-> lab-300064{{"Responsives Würfel-Layout mit Flexbox"}} css/flexbox -.-> lab-300064{{"Responsives Würfel-Layout mit Flexbox"}} end

Layout Würfel 1

Um loszulegen, öffne den Editor. Du solltest eine Datei - index.html - in deinem Editor sehen.

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

Vorschau auf das unfertige Würfel-Layout

In diesem Schritt wirst du die Eigenschaften justify-content und align-items verwenden, um die Punkte innerhalb des ersten Würfels zu positionieren.

Öffne die Datei index.html in deinem Code-Editor.
Füge im <style>-Abschnitt die folgenden Regeln für die Klasse .div1 hinzu:

.div1 {
  justify-content: center;
  align-items: center;
}

Mit justify-content: center wird der Punkt horizontal zentriert, und mit align-items: center vertikal.

Layout Würfel 2

In diesem Schritt wirst du die Eigenschaften justify-content, flex-direction und align-items verwenden, um die Punkte innerhalb des zweiten Würfels zu positionieren.

Füge im <style>-Abschnitt die folgenden Regeln für die Klasse .div2 hinzu:

.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

Mit justify-content: space-around werden die Punkte entlang der Hauptachse (horizontal) gleichmäßig verteilt, flex-direction: column stapelt die Punkte vertikal, und align-items: center zentriert sie innerhalb des Würfels.

Layout Würfel 3

In diesem Schritt wirst du die Eigenschaften justify-content, align-self und align-items verwenden, um die Punkte innerhalb des dritten Würfels zu positionieren.

Füge im <style>-Abschnitt die folgenden Regeln für die Klasse .div3 hinzu:

.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

Mit justify-content: space-around werden die Punkte entlang der Hauptachse (horizontal) gleichmäßig verteilt, align-items: center zentriert sie vertikal, und padding: 10px fügt etwas Abstand um den Würfel hinzu.

Die Eigenschaft align-self wird verwendet, um den ersten und letzten Punkt jeweils oben und unten im Würfel zu positionieren.

Layout Würfel 4, 5, 6, 7 und 9

In diesem Schritt wirst du die Eigenschaften justify-content, align-self, flex-direction und align-items verwenden, um die Punkte innerhalb der verbleibenden Würfel zu positionieren.

Füge im <style>-Abschnitt die folgenden Regeln für die Klasse .div4 hinzu:

.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

Die inneren <div>-Elemente werden verwendet, um die Punkte horizontal zu gruppieren, wobei justify-content: space-around sie gleichmäßig verteilt. Die Eigenschaft align-self: center wird verwendet, um die einzelnen Punkte innerhalb ihrer jeweiligen Zeilen zu zentrieren.

Layout Würfel 8

In diesem letzten Schritt wirst du die Eigenschaften justify-content, align-self, flex-wrap und flex-basis verwenden, um die Punkte innerhalb des achten Würfels zu positionieren.

Füge im <style>-Abschnitt die folgenden Regeln für die Klasse .div8 hinzu:

.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

Die Eigenschaft flex-wrap: wrap ermöglicht es den Punkten, auf die nächste Zeile zu springen, wenn sie nicht auf einer einzigen Zeile passen. Mit padding: 2px wird etwas Abstand um den Würfel hinzugefügt.

Die inneren <div>-Elemente werden verwendet, um die Punkte horizontal zu gruppieren, wobei justify-content: space-between sie gleichmäßig verteilt und align-items: center sie vertikal zentriert. Mit flex-basis: 100% wird sichergestellt, dass jede Zeile die volle Breite des Würfels einnimmt.

Indem du diese Schritte folgst, hast du das Flex-Würfel-Layout erfolgreich gemäß den Anforderungen implementiert.

✨ Lösung prüfen und üben

Zusammenfassung

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