Flexbox in CSS: Erste Schritte zur Strukturierung deiner Webseite

In diesem Tutorial erfährst du, wie du mit dem Flexbox-Layout in CSS und HTML eine Beispielstruktur für deine Webprojekte aufbauen kannst. Wir werden uns mit den integrierten Debugging-Tools von Visual Studio Code in Verbindung mit Microsoft Edge beschäftigen und die ersten Schritte zur Aktivierung des Flexbox-Layouts unternehmen. Flexbox ist ein leistungsstarkes Layout-System, das dir hilft, komplexe Layouts mit geringem Aufwand und flexibler Anordnung von Elementen zu erstellen.

Wichtigste Erkenntnisse

• Mit Flexbox kannst du Elemente horizontal und vertikal anordnen.
• Die Microsoft Edge Developer Tools können direkt in Visual Studio Code integriert werden.
• Flex-Direction beeinflusst die Ausrichtung der Flex-Elemente.

Schritt-für-Schritt-Anleitung

Zuerst wirst du in Visual Studio Code die Microsoft Edge Tools installieren. Suche nach „Microsoft Edge Tools for VS Code“ in den Extensions und installiere diese.

Nachdem die Extension installiert ist, musst du zu den Debugging-Optionen gehen. Klicke auf „Run and Debug“ und dann auf „create a launch.json file“. Dies wird dir helfen, deine Einstellungen zu konfigurieren.

In der Konfigurationsdatei, die jetzt erstellt wurde, füge eine neue Konfiguration für „Microsoft Edge Tools“ hinzu. Stelle sicher, dass du als lokale Adresse localhost:3000 einträgst, da wir in unserem Terminal den Server auf diesem Port laufen lassen.

Nun ist es an der Zeit, dein Projekt zu starten. Wechsle in das richtige Unterverzeichnis und führe den Befehl npm run dev aus. Öffne anschließend localhost:3000 in deinem Browser.

Sobald du die Seite geladen hast, kannst du die Microsoft Edge Developer Tools aktivieren, indem du auf den entsprechenden Button in Visual Studio Code klickst. Dadurch öffnet sich das Developer-Tool direkt neben deinem Editor.

Jetzt kannst du die Struktur deiner Anwendung sehen. Wir haben einen Container (div), der die Klasse „Flex Container“ trägt. Innerhalb dieses Containers befinden sich vier DIV-Elemente, die die Klasse „Flex Child“ haben und jeweils den Textinhalt 1, 2, 3 und 4 darstellen.

Der Flex Container ist derzeit lediglich mit einer Breite von 400 Pixeln und einer Höhe von 200 Pixeln definiert, während die Flex-Kinder mit einer Breite von 100 Pixeln und einer Höhe von 50 Pixeln definiert sind. Obwohl keines der Kinder zurzeit mit Flexbox angeordnet ist, werden sie in einer vertikalen Liste angezeigt.

Um Flexbox aktiv zu nutzen, musst du für den Flex Container das CSS-Attribut display: flex; hinzufügen und speichern. Wenn du dies tust, siehst du, dass sich die Anordnung der Kinder automatisch ändert und sie nun nebeneinander angezeigt werden.

Falls du die Flex-Kinder wieder vertikal anordnen möchtest, kannst du die flex-direction-Eigenschaft verwenden. Setze flex-direction: column; für den Flex Container, um die Ausrichtung der Flex-Kinder wieder in die vertikale Richtung zu ändern.

Du bemerkst, dass die Flex-Kinder nun wieder vertikal angeordnet sind. Wenn du nun die Höhe und Breite anpasst, sieht es so aus, als ob sie in einen Block integriert sind, auch wenn das display nicht auf Block gesetzt wird, sondern auf Flex.

Das war bereits ein Überblick über die Grundlagen des Flexbox-Layouts. Im Video haben wir die wichtigsten Eigenschaften besprochen und ihre Auswirkungen gesehen. In zukünftigen Tutorials werden wir weitere Funktionen von Flexbox erkunden und sehen, was du alles mit diesem mächtigen Layout-System anstellen kannst.

Zusammenfassung

In diesem Tutorial hast du gelernt, wie du eine einfache Struktur mit Flexbox in CSS aufbaust. Du hast die Microsoft Edge Developer Tools in Visual Studio Code integriert und erste Schritte zur Aktivierung des Flex-Layouts unternommen. Es liegen noch viele Möglichkeiten vor dir, die wir in den folgenden Videos näher betrachten werden.