CSS Layout Grundlagen

Einführung

Willkommen zum CSS Layout Basics Lab! In dieser praktischen Sitzung werden Sie die Grundlagen von CSS Flexbox erkunden, einem leistungsstarken Layoutmodell, das eine effiziente Möglichkeit bietet, Elemente in einem Container anzuordnen, auszurichten und den Platz zwischen ihnen zu verteilen.

Während dieses Labs arbeiten Sie mit einer vorkonfigurierten HTML-Datei (index.html) und einer CSS-Datei (style.css). Ihre Aufgabe ist es, die Datei style.css zu ändern, um das Layout der Elemente auf der Seite zu manipulieren. Sie können Ihre Änderungen in Echtzeit sehen, indem Sie im Lab-Environment zum Tab Web 8080 wechseln.

Sie lernen, wie Sie:

• Einen Flex-Container initialisieren.
• Elemente entlang der Hauptachse mit justify-content ausrichten.
• Elemente entlang der Querachse mit align-items ausrichten.
• Die Layout-Richtung mit flex-direction ändern.
• Elemente erlauben, auf mehrere Zeilen umzubrechen, mit flex-wrap.

Legen wir los!

Setze display flex auf ein Container-Element

In diesem Schritt beginnen Sie damit, ein Standard-Block-Level-Element in einen Flex-Container zu verwandeln. Dies ist der grundlegende Schritt zur Erstellung jedes Flexbox-Layouts.

Die Eigenschaft display: flex; wird auf ein Elternelement (den Container) angewendet, um einen Flex-Kontext für alle seine direkten Kinder (die Elemente) zu aktivieren. Sobald sie angewendet wird, ordnen sich die Kinder automatisch in einer Reihe an.

Öffnen Sie zuerst die Datei style.css im Datei-Explorer auf der linken Seite Ihres Bildschirms.

Suchen Sie als Nächstes die CSS-Regel .container. Fügen Sie die Eigenschaft display: flex; innerhalb dieser Regel hinzu.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  /* Wir werden hier Flex-Eigenschaften hinzufügen */
  display: flex;
}

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei. Wechseln Sie nun zum Tab Web 8080, um das Ergebnis zu sehen. Sie werden feststellen, dass die nummerierten Boxen, die zuvor vertikal gestapelt waren, nun horizontal in einer einzigen Reihe angeordnet sind.

Verwende die justify-content-Eigenschaft space-between

In diesem Schritt lernen Sie, wie Sie die Ausrichtung von Elementen entlang der Hauptachse (standardmäßig horizontal) mit der justify-content-Eigenschaft steuern. Diese Eigenschaft hilft, den zusätzlichen freien Speicherplatz im Container zu verteilen.

Wir verwenden den Wert space-between, der die Elemente gleichmäßig verteilt. Das erste Element wird am Anfang des Containers positioniert, das letzte Element am Ende, und der verbleibende Platz wird gleichmäßig zwischen den Elementen verteilt.

Fügen Sie in Ihrer style.css-Datei die Eigenschaft justify-content: space-between; zur .container-Regel hinzu.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
}

Speichern Sie die Datei und überprüfen Sie den Tab Web 8080. Sie werden sehen, dass die Flex-Elemente nun über die gesamte Breite des Containers verteilt sind, mit gleichem Abstand zwischen ihnen.

Wende die align-items-Eigenschaft center an

In diesem Schritt lernen Sie, wie Sie Elemente entlang der Querachse (standardmäßig vertikal) mit der align-items-Eigenschaft ausrichten.

Um den Effekt der vertikalen Ausrichtung zu sehen, müssen wir unserem Container zuerst eine Höhe geben. Dann verwenden wir den Wert center für align-items, um die Elemente vertikal im Container zu zentrieren.

Fügen Sie in Ihrer style.css-Datei eine height und die Eigenschaft align-items: center; zur .container-Regel hinzu.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 200px;
  align-items: center;
}

Speichern Sie die Datei und betrachten Sie das Ergebnis im Tab Web 8080. Der Container ist nun höher, und alle Flex-Elemente sind perfekt in der Mitte des vertikalen Raums zentriert.

Implementiere die flex-direction-Eigenschaft column

In diesem Schritt ändern Sie die Richtung der Hauptachse von horizontal zu vertikal mit der flex-direction-Eigenschaft.

Standardmäßig ist die Flex-Richtung row. Indem Sie sie auf column setzen, können Sie die Flex-Elemente vertikal stapeln. Wenn Sie die Flex-Richtung auf column ändern, wird die Hauptachse vertikal und die Querachse horizontal. Das bedeutet, dass justify-content nun die vertikale Ausrichtung steuert und align-items die horizontale Ausrichtung.

Fügen Sie in Ihrer style.css-Datei die Eigenschaft flex-direction: column; zur .container-Regel hinzu.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 400px; /* Erhöhen wir die Höhe für eine bessere Visualisierung */
  align-items: center;
  flex-direction: column;
}

Hinweis: Wir haben die Höhe auf 400px erhöht, um den Effekt von justify-content in einem Spaltenlayout besser zu sehen.

Speichern Sie die Datei und beobachten Sie die Änderungen im Tab Web 8080. Die Elemente sind nun in einer einzigen Spalte gestapelt. Beachten Sie, wie justify-content: space-between nun vertikalen Abstand zwischen den Elementen hinzufügt und align-items: center sie horizontal zentriert.

Füge die flex-wrap-Eigenschaft wrap für Umbruch hinzu

In diesem letzten Schritt lernen Sie, wie Sie Fälle behandeln, in denen die Flex-Elemente ihren Container überlaufen. Die flex-wrap-Eigenschaft ermöglicht es den Elementen, auf eine neue Zeile umzubrechen, anstatt zu schrumpfen oder überzulaufen.

Um dies zu demonstrieren, kehren wir zu einem zeilenbasierten Layout zurück und setzen eine feste Breite für den Container, die zu schmal ist, um alle Elemente in einer Zeile aufzunehmen.

Zuerst bereinigen wir die .container-Regel, indem wir die Eigenschaften aus den vorherigen Schritten entfernen (justify-content, align-items, flex-direction und height). Fügen Sie dann eine feste width und die Eigenschaft flex-wrap: wrap; hinzu.

Aktualisieren Sie Ihre .container-Regel in style.css wie folgt:

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  width: 450px; /* Setze eine feste Breite, um das Umbrechen zu erzwingen */
  flex-wrap: wrap;
}

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Sie werden sehen, dass die Flex-Elemente, die nicht auf die erste Zeile passen, auf eine zweite Zeile umgebrochen sind. Dies ist unerlässlich für die Erstellung responsiver Layouts, die sich an verschiedene Bildschirmgrößen anpassen.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des CSS Layout Basics Labs! Sie haben die Kernkonzepte von CSS Flexbox erfolgreich erlernt und sie angewendet, um flexible und responsive Layouts zu erstellen.

In diesem Lab haben Sie geübt:

• display: flex;: Zum Erstellen eines Flex-Containers.
• justify-content: Zum Ausrichten von Elementen entlang der Hauptachse.
• align-items: Zum Ausrichten von Elementen entlang der Querachse.
• flex-direction: Zum Definieren der Richtung der Hauptachse (Zeile oder Spalte).
• flex-wrap: Um das Umbrechen von Elementen auf mehrere Zeilen zu ermöglichen.

Diese Eigenschaften sind die Bausteine des modernen Webdesigns. Wir ermutigen Sie, weiterhin mit verschiedenen Werten für diese Eigenschaften zu experimentieren, um Ihr Verständnis von Flexbox weiter zu festigen.