In der hektischen Stadt Petville hat Jordan, ein Webdesigner, die Aufgabe, die Website "Pet's House" neu zu gestalten.
Dieses Lab erstellt ein responsives und visuell ansprechendes Layout für Tierhalter. Die Website muss Dienstleistungen, Informationen über uns und Kontaktinformationen effektiv auf verschiedenen Geräten präsentieren. Jordan beschließt, Flexbox zu verwenden, da es über leistungsstarke Layoutmöglichkeiten verfügt.
Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 94% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.
Lerne durch echte Programmierung.
Flexbox Grundlagen und die display-Eigenschaft
Um mit Flexbox zu beginnen, müssen Sie sich mit seinen Grundkonzepten vertraut machen.
Stellen Sie sich vor, Sie wären Innenarchitekt und Ihre Webseite wäre ein großer, leerer Raum. Ihre Aufgabe ist es, diesen Raum sowohl gemütlich als auch ästhetisch ansprechend zu gestalten. Hier kommt Flexbox ins Spiel, Ihre Zauberstab, die Ihnen hilft, Möbel (d.h. Webseitelemente) mühelos zu platzieren. Egal, ob es ein Sofa (Hauptinhalt) oder ein Kaffeetisch (unterstützende Informationen) ist, mit Flexbox können Sie sicherstellen, dass alles perfekt platziert ist.
Bevor wir mit Flexbox anfangen, gehen wir schnell durch einige grundlegende Konzepte:
Flex-Container: Stellen Sie sich ihn als Ihren Raum vor, in dem Sie verschiedene Möbelstücke platzieren werden.
Flex-Elemente: Dies sind Ihre Möbelstücke, wie Sofas, Stühle und Kaffeetische.
Um Flexbox zu verwenden, müssen Sie zunächst einen Flex-Container deklarieren. Es ist, als würde man sagen: "Okay, lasst uns diesen Raum einrichten."
.container {
display: flex;
}
Sobald Sie dies tun, werden alle direkten Kinder der .container-Klasse zu Flex-Elementen und folgen den Layoutregeln von Flexbox.
Die display-CSS-Eigenschaft bestimmt, ob ein Element als Block- oder Inline-Box behandelt wird und das Layout, das für seine Kinder verwendet wird, wie z.B. Flusslayout, Grid oder Flex.
Wir können das display-Attribut verwenden, um die Anordnung von Inline-Elementen zu ändern, z.B.:
display: block gibt den Elementen ihren eigenen Platz, während display: inline-block für ein flexibleres Layout sorgt, sodass die Elemente nebeneinander platziert werden, aber dennoch ihre Maße steuern können.
Jetzt, da wir wissen, wie display verwendet wird, können wir Folgendes zu style.css hinzufügen:
.navigation li {
display: inline-block;
}
.navigation li a {
text-decoration: none;
color: black;
padding: 10px;
display: block;
}
form.form-content {
display: block;
padding: 0.8em 0;
}
Im Bereich von Flexbox sind zwei Konzepte von entscheidender Bedeutung: Hauptachse und Querbene. Standardmäßig ist die Hauptachse horizontal und die Querbene vertikal, aber dies kann mit der flex-direction-Eigenschaft angepasst werden.
Nun, lass uns darüber sprechen, wie wir unsere Möbel (Flex-Elemente) positionieren.
justify-content: Diese Eigenschaft steuert, wie sich Flex-Elemente entlang der Hauptachse verteilen. Stellen Sie sich vor, Sie richten den Abstand zwischen einem Sofa und Stühlen ein, um sicherzustellen, dass sie weder zu weit voneinander entfernt noch zu nah beieinander sind.
align-items: Mit dieser Eigenschaft wird bestimmt, wie sich Flex-Elemente entlang der Querachse ausrichten. Es ist, als würden Sie sicherstellen, dass alle Ihre Gemälde auf der gleichen Höhe hängen, was den Raum ordentlich wirken lässt.
flex-grow: Stellen Sie sich vor, Sie möchten, dass Ihr Bücherregal den gesamten verbleibenden Raum oder einen Teil davon einnimmt. Mit dieser Eigenschaft können Sie ein Möbelstück (Element) "vergrößern", um zusätzlichen Raum zu füllen.
Schauen wir uns die Magie von Flexbox an einem einfachen Layout an, das aus einem Container und drei Elementen besteht. Was wir tun möchten, ist, diese drei Elemente horizontal im Container zentrieren und sicherzustellen, dass sie bei ausreichendem Raum gleichmäßig verteilt sind.
Mit dieser Einrichtung werden unsere Möbel (Elemente) genau so positioniert wie gewünscht.
Flexbox ist wirklich wie Magie, die uns ermöglicht, unsere Webseiten mit bisher unbekannter Flexibilität und Leichtigkeit zu gestalten. Jetzt, da Sie diese Magie beherrschen, probieren Sie es aus! Schaffen Sie den "Raum" Ihrer Träume!
Um die Magie von Flexbox lebendig zu demonstrieren, werde ich eine Illustration generieren, die einen Raum mit Flexbox-Layout zeigt, einschließlich Möbelstücken (wie ein Sofa, Kaffeetisch und Bücherregal), die verschiedene Flex-Elemente repräsentieren. Dies wird zeigen, wie sie mit Flexbox-Eigenschaften wie justify-content und align-items elegant im Raum positioniert werden.
Zusammenfassend lässt sich sagen, dass Flexbox ein eindimensionales Layoutmodell ist, das es Ihnen ermöglicht, Elemente einfach horizontal oder vertikal auszurichten, und es ist ideal für die Erstellung von responsiven Designs. Hier sind einige wichtige Begriffe, die Sie kennen sollten:
Flex-Container: Das übergeordnete Element, das die Flex-Elemente enthält.
Flex-Element: Ein einzelnes Element innerhalb des Flex-Containers.
Flex-Richtung: Bestimmt die Hauptachse des Containers.
Flex-Wrap: Steuert, ob die Elemente auf mehrere Zeilen umgebrochen werden sollen oder nicht.
Justify Content: Ausrichtet die Elemente entlang der Hauptachse.
Align Items: Ausrichtet die Elemente entlang der Querachse.
Jetzt, da wir wissen, wie Flexbox verwendet wird, können wir Folgendes zu style.css hinzufügen:
In diesem Lab hat Jordan Flexbox erfolgreich auf die Website "Pet's House" angewandt und dadurch die Responsivität und Ästhetik ihres Layouts verbessert. Durch Schritte, die sich auf den Header, die Navigation und die Hauptsektionen konzentrierten, wird die Website jetzt auf verschiedenen Geräten effizient Inhalte anzeigen. Flexbox hat sich als ein unerschätzbares Tool bei der Erstellung dynamischer und flexibler Layouts erwiesen und zeigt seine Wichtigkeit in der modernen Webdesign.
