Einführung
In diesem Lab werden die Teilnehmer die flex-basis-Eigenschaft in CSS Flexbox auf umfassende und praxisorientierte Weise erkunden. Indem sie eine strukturierte HTML-Datei erstellen und schrittweise CSS-Stile hinzufügen, werden die Lernenden praktische Erfahrungen bei der Erkenntnis der Auswirkungen von flex-basis auf die anfängliche Größe von Flex-Elementen innerhalb eines Containers sammeln.
Das Lab führt die Schüler durch das Erstellen eines Flexbox-Layouts, das Definieren von Container-Eigenschaften, das Anwenden von flex-basis auf einzelne Elemente und das Experimentieren mit verschiedenen Werten. Die Teilnehmer werden lernen, wie flex-basis mit anderen Flex-Eigenschaften interagiert, was es ihnen ermöglicht, die grundlegende Größe und Verteilung von Elementen in responsiven Webdesigns zu steuern.
Erstellen Sie eine HTML-Datei für das Flexbox-Layout
In diesem Schritt erstellen Sie die grundlegende HTML-Datei, um die flex-basis-Eigenschaft in CSS Flexbox zu erkunden. Wir werden eine einfache HTML-Struktur aufsetzen, die als Grundlage für unsere Flexbox-Layout-Experimente dienen wird.
Öffnen Sie die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei namens flexbox-demo.html über die WebIDE-Schnittstelle.
Hier ist die grundlegende HTML-Struktur, die Sie verwenden werden:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-basis Demo</title>
<style>
/* CSS-Stile werden in späteren Schritten hinzugefügt */
</style>
</head>
<body>
<div class="container">
<div class="flex-item item1">Item 1</div>
<div class="flex-item item2">Item 2</div>
<div class="flex-item item3">Item 3</div>
<div class="flex-item item4">Item 4</div>
<div class="flex-item item5">Item 5</div>
</div>
</body>
</html>
Zergliedern wir die HTML-Struktur:
- Wir haben einen Container
<div>mit der Klassecontainererstellt. - Innerhalb des Containers haben wir fünf
<div>-Elemente mit den Klassenflex-itemund individuellen Item-Klassen. - Diese Struktur wird es uns ermöglichen, die flex-basis-Eigenschaften in den folgenden Schritten zu demonstrieren.
Beispielausgabe, wenn Sie die Datei in der WebIDE speichern:
Datei erstellt: ~/project/flexbox-demo.html
Definieren Sie einen grundlegenden CSS Flexbox-Container
In diesem Schritt lernen Sie, wie Sie einen grundlegenden CSS Flexbox-Container erstellen, indem Sie Stile zur in dem vorherigen Schritt erstellten HTML-Datei hinzufügen. Öffnen Sie die Datei flexbox-demo.html in der WebIDE und modifizieren Sie den <style>-Abschnitt, um den Flexbox-Container zu definieren.
Fügen Sie die folgenden CSS-Regeln hinzu, um den grundlegenden Flexbox-Container zu definieren:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
</style>
Zergliedern wir die wichtigsten CSS-Eigenschaften:
display: flex;wandelt den Container in einen Flex-Container um.background-colorundborderhelfen, den Container zu visualisieren.- Die
.flex-item-Stile definieren das Aussehen der einzelnen Flex-Elemente. marginundpaddingsorgen für Abstände zwischen den Elementen.
Beispielausgabe, wenn Sie die Datei speichern:
Flexbox-Container-Stile zu flexbox-demo.html hinzugefügt
Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie fünf grüne Boxen, die horizontal angeordnet sind, was den Standard-Flex-Layout zeigt.
Wenden Sie die flex-basis-Eigenschaft auf Flex-Elemente an
In diesem Schritt lernen Sie über die flex-basis-Eigenschaft und wie sie die anfängliche Größe von Flex-Elementen steuert. Öffnen Sie die Datei flexbox-demo.html in der WebIDE und aktualisieren Sie die CSS-Stile, um flex-basis zu demonstrieren.
Fügen Sie die folgenden CSS-Regeln hinzu, um flex-basis auf einzelne Flex-Elemente anzuwenden:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
.item1 {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
.item3 {
flex-basis: 150px;
}
.item4 {
flex-basis: 250px;
}
.item5 {
flex-basis: 120px;
}
</style>
Wichtige Punkte zu flex-basis:
- Sie setzt die anfängliche Hauptgröße eines Flex-Elementes.
- Kann in Pixeln, Prozenten oder anderen Einheiten angegeben werden.
- Bestimmt die Standardgröße vor dem Flex-Wachsen oder -Schrumpfen.
- Ersetzt
widthin einem Flex-Container.
Beispielausgabe, wenn Sie die Datei speichern:
Flex-Elemente mit unterschiedlichen flex-basis-Werten hinzugefügt
Wenn Sie die HTML-Datei in einem Browser öffnen, sehen Sie Flex-Elemente mit unterschiedlichen anfänglichen Breiten, die auf ihren flex-basis-Werten basieren.
Experimentieren Sie mit verschiedenen flex-basis-Werten
In diesem Schritt werden Sie verschiedene Möglichkeiten zur Angabe von flex-basis-Werten erkunden und verstehen, wie verschiedene Einheiten und Ansätze die Größe von Flex-Elementen beeinflussen. Aktualisieren Sie die CSS in Ihrer flexbox-demo.html-Datei mit den folgenden Stilen:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Verschiedene Typen von flex-basis-Werten */
.item1 {
flex-basis: 100px;
} /* Feste Pixelbreite */
.item2 {
flex-basis: 20%;
} /* Prozent des Containers */
.item3 {
flex-basis: auto;
} /* Basierend auf dem Inhalt */
.item4 {
flex-basis: 10rem;
} /* Verwendung von rem-Einheiten */
.item5 {
flex-basis: content;
} /* Basierend auf der Inhaltsgröße */
</style>
Wichtige Beobachtungen zu flex-basis-Werten:
- Pixelwerte (
100px) bieten eine feste Breite. - Prozentwerte (
20%) skalieren sich relativ zum Container. autoverwendet die Inhaltsgröße des Elements.- Verschiedene Einheiten wie
rembieten eine responsive Größe. - Das Schlüsselwort
contentpasst sich an die Inhaltsgröße des Elements an.
Beispielausgabe, wenn Sie die Datei speichern:
Flex-Elemente mit unterschiedlichen flex-basis-Konfigurationen
Wenn Sie die HTML-Datei in einem Browser öffnen, werden Sie sehen, wie verschiedene flex-basis-Werte die Größe und das Layout der Elemente beeinflussen.
Erforschen Sie die Wechselwirkung von flex-basis mit anderen Flex-Eigenschaften
In diesem Schritt lernen Sie, wie flex-basis mit anderen Flex-Eigenschaften wie flex-grow und flex-shrink interagiert. Aktualisieren Sie die CSS in Ihrer flexbox-demo.html-Datei mit dem folgenden umfassenden Beispiel:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
width: 100%;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Demonstrating flex property interactions */
.item1 {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
}
.item2 {
flex-basis: 200px;
flex-grow: 2;
flex-shrink: 1;
}
.item3 {
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 2;
}
.item4 {
flex: 1 1 250px; /* Kurzschreibweise für grow, shrink, basis */
}
.item5 {
flex: 2 0 120px;
}
</style>
Wichtige Konzepte der Wechselwirkung von Flex-Eigenschaften:
flex-grow: Bestimmt, um wie viel ein Element im Vergleich zu anderen Elementen wachsen wird.flex-shrink: Kontrolliert, um wie viel ein Element im Vergleich zu anderen Elementen schrumpfen wird.- Die
flex-Kurzschreibweise kombiniert grow, shrink und basis. - Verschiedene Kombinationen erzeugen einzigartiges Layoutverhalten.
Beispielausgabe, wenn Sie die Datei speichern:
Flex-Elemente mit komplexen Wechselwirkungen von grow, shrink und basis
Wenn Sie die HTML-Datei in einem Browser öffnen, werden Sie beobachten, wie diese Eigenschaften zusammenarbeiten, um flexible Layouts zu erstellen.
Zusammenfassung
In diesem Labyrinth erkunden die Teilnehmer die flex-basis-Eigenschaft in CSS Flexbox, indem sie eine umfassende HTML- und CSS-Demonstration erstellen. Das Labyrinth beginnt mit der Konstruktion einer grundlegenden HTML-Datei, die einen Container mit mehreren Flex-Elementen aufweist, um das strukturelle Rahmenwerk für die Flexbox-Layout-Experimente zu etablieren. Die Teilnehmer lernen, einen grundlegenden Flexbox-Container mit CSS zu definieren, indem sie die Anzeige-Eigenschaften, die Hintergrundfarben und die initialen Stile festlegen, um ein responsives und visuell ansprechendes Layout zu erstellen.
Das Labyrinth führt die Lernenden durch die Anwendung der flex-basis-Eigenschaft auf Flex-Elemente, wodurch sie verstehen, wie diese Eigenschaft die anfängliche Größe von Flex-Elementen steuert, bevor zusätzlicher Platz verteilt wird. Indem sie mit verschiedenen flex-basis-Werten experimentieren und die Wechselwirkung dieser Eigenschaft mit anderen Flex-Eigenschaften erkunden, gewinnen die Teilnehmer praktische Erkenntnisse zur Verwaltung von flexiblen Layouts und zur Steuerung der Elementgröße innerhalb eines Flexbox-Containers.
