Einführung
In diesem Lab werden die Teilnehmer die Eigenschaft flex-grow in CSS Flexbox erkunden, eine leistungsstarke Layout-Technik zum Erstellen von responsiven und flexiblen Webdesigns. Mit einem schrittweisen Ansatz werden die Lernenden eine HTML-Datei erstellen, einen Flexbox-Container einrichten und mit unterschiedlichen flex-grow-Werten experimentieren, um zu verstehen, wie Elemente dynamisch expandieren und den verfügbaren Platz verteilen.
Das Lab führt die Schüler durch das Erstellen einer grundlegenden HTML-Struktur, das Definieren eines Flexbox-Containers und das Anwenden von flex-grow-Eigenschaften auf die Kind-Elemente. Indem die Teilnehmer numerische Werte setzen und beobachten, wie sich die Boxen proportional vergrößern, werden sie praktische Einblicke in die Steuerung der Layout-Flexibilität und in das subtilere Verhalten von flex-grow im Webdesign gewinnen.
HTML-Datei erstellen und grundlegende Struktur einrichten
In diesem Schritt erstellen Sie die grundlegende HTML-Datei, um die Eigenschaft flex-grow in CSS Flexbox zu erkunden. Wir werden eine grundlegende HTML-Struktur einrichten und die Umgebung für unsere Flexbox-Demonstration vorbereiten.
Navigieren Sie zunächst zum Projektverzeichnis und erstellen Sie eine HTML-Datei:
cd ~/project
touch index.html
Öffnen Sie nun die Datei index.html in der WebIDE und fügen Sie die folgende HTML-Struktur hinzu:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-grow Demonstration</title>
<style>
/* CSS-Styles werden in späteren Schritten hinzugefügt */
</style>
</head>
<body>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>
Diese grundlegende HTML-Struktur umfasst:
- Ein Container-
<div>, der unser Flexbox-Container werden wird - Drei Kind-
<div>-Elemente, die Boxen darstellen, mit denen wirflex-growdemonstrieren werden - Ein Platzhalter-
<style>-Abschnitt, in dem wir später CSS hinzufügen werden
Beispielausgabe beim Anzeigen der Datei:
[HTML-Datei mit grundlegender Struktur und drei div-Boxen erstellt]
Die Datei ist nun für weitere Flexbox-Untersuchungen in CSS in den kommenden Schritten bereit.
Flexbox-Container mit der flex-grow-Eigenschaft definieren
In diesem Schritt lernen Sie, wie Sie einen Flexbox-Container definieren und den grundlegenden Begriff der flex-grow-Eigenschaft verstehen. Öffnen Sie die Datei index.html in der WebIDE und ändern Sie den <style>-Abschnitt, um einen Flexbox-Container zu erstellen.
Fügen Sie die folgenden CSS-Regeln hinzu, um den Flexbox-Container zu definieren:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
Zergliedern wir die CSS-Regeln:
display: flex;verwandelt den Container in einen Flex-Container.width: 100%;lässt den Container die volle Breite einnehmen.- Die
.box-Stile definieren das Aussehen der einzelnen Flex-Elemente.
Beispielausgabe, wenn die Seite im Browser angezeigt wird:
[Drei grüne Boxen werden in einer horizontalen Zeile angezeigt und füllen den Container]
Die flex-grow-Eigenschaft bestimmt, wie sich Flex-Elemente zueinander vergrößern, wenn zusätzlicher Platz verfügbar ist. Standardmäßig ist flex-grow auf 0 gesetzt, was bedeutet, dass die Elemente nicht über ihre ursprüngliche Größe hinauswachsen.
Um das Standardverhalten zu sehen, öffnen Sie die HTML-Datei in einem Webbrowser. Sie werden feststellen, dass die Boxen ihre ursprüngliche Größe beibehalten und den Container nicht ausfüllen.
Untersuchen Sie die Anfangswerte und die Vererbungswerte von flex-grow
In diesem Schritt werden Sie das Standardverhalten und die Vererbungseigenschaften der flex-grow-Eigenschaft untersuchen. Öffnen Sie Ihre index.html-Datei und aktualisieren Sie den <style>-Abschnitt, um diese Konzepte zu erkunden.
Zunächst verstehen wir den Anfangswert von flex-grow:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
/* Der Anfangswert von flex-grow ist standardmäßig 0 */
/* flex-grow: 0; */
}
.box1 {
/* Explicit setzen des Anfangswerts */
flex-grow: 0;
}
.box2 {
/* Vererbung demonstrieren */
flex-grow: inherit;
}
.box3 {
/* Ein anderer Weg, den Anfangszustand zu zeigen */
flex-grow: initial;
}
</style>
Wichtige Beobachtungen:
flex-grow: 0;ist der Standardwert, was bedeutet, dass die Elemente nicht wachsen.inheritnimmt denflex-grow-Wert aus dem übergeordneten Container.initialsetzt die Eigenschaft auf ihren Standardwert (0) zurück.
Beispielausgabe, wenn die Seite im Browser angezeigt wird:
[Drei grüne Boxen von gleicher Breite, die nicht expandieren, um den Container auszufüllen]
Um dies weiter zu veranschaulichen, können Sie das HTML ändern, um zu zeigen, wie diese Werte funktionieren:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 0)</div>
<div class="box box2">Box 2 (flex-grow: inherit)</div>
<div class="box box3">Box 3 (flex-grow: initial)</div>
</div>
</body>
Dieses Beispiel zeigt, dass standardmäßig Flex-Elemente ihre ursprüngliche Größe beibehalten und nicht wachsen, um zusätzlichen Platz im Container auszufüllen.
Setzen Sie numerische flex-grow-Werte für verschiedene Elemente
In diesem Schritt lernen Sie, wie Sie numerische Werte mit flex-grow verwenden, um zu steuern, wie sich Flex-Elemente innerhalb eines Containers erweitern. Öffnen Sie Ihre index.html-Datei und aktualisieren Sie den <style>-Abschnitt, um verschiedene numerische flex-grow-Werte zu erkunden.
Aktualisieren Sie Ihre CSS mit folgenden Stilen:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
/* Box 1 wird um 1 Einheit wachsen */
flex-grow: 1;
}
.box2 {
/* Box 2 wird um 2 Einheiten wachsen */
flex-grow: 2;
}
.box3 {
/* Box 3 wird um 3 Einheiten wachsen */
flex-grow: 3;
}
</style>
Aktualisieren Sie das HTML, um den neuen Stilen zu entsprechen:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 3)</div>
</div>
</body>
Wichtige Beobachtungen:
flex-grow-Werte bestimmen, wie zusätzlicher Platz verteilt wird.- Höhere Werte bedeuten mehr Wachstum im Vergleich zu anderen Elementen.
- Der gesamte verfügbare Platz wird proportional aufgeteilt.
Beispielausgabe, wenn die Seite im Browser angezeigt wird:
[Drei grüne Boxen mit unterschiedlichen Breiten:
- Box 1 ist die schmalste (1 Einheit)
- Box 2 ist breiter (2 Einheiten)
- Box 3 ist am breitesten (3 Einheiten)]
Die Boxen werden jetzt unterschiedlich expandieren, je nachdem, was ihr flex-grow-Wert ist, was zeigt, wie Sie die Größe von Elementen in einem Flex-Container steuern können.
Experimentieren Sie mit den flex-grow-Verhältnissen
In diesem Schritt werden Sie komplexere flex-grow-Verhältnisse erkunden und verstehen, wie unterschiedliche Werte innerhalb eines Flex-Containers miteinander interagieren. Aktualisieren Sie Ihre index.html-Datei mit dem folgenden Code:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.box {
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
background-color: #3498db;
flex-grow: 1;
}
.box2 {
background-color: #e74c3c;
flex-grow: 2;
}
.box3 {
background-color: #2ecc71;
flex-grow: 1;
}
.box4 {
background-color: #f39c12;
flex-grow: 4;
}
</style>
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 1)</div>
<div class="box box4">Box 4 (flex-grow: 4)</div>
</div>
</body>
Wichtige Konzepte, die zu verstehen sind:
- Gesamt-Flex-Grow-Werte: 1 + 2 + 1 + 4 = 8
- Box 1 und Box 3 erhalten jeweils 1/8 des zusätzlichen Platzes
- Box 2 erhält 2/8 des zusätzlichen Platzes
- Box 4 erhält 4/8 (die Hälfte) des zusätzlichen Platzes
Beispielausgabe, wenn die Seite im Browser angezeigt wird:
[Vier farbige Boxen mit unterschiedlichen Breiten:
- Box 1 und Box 3: Schmal (jeweils 1/8)
- Box 2: Ein bisschen breiter (2/8)
- Box 4: Am breitesten (4/8 oder die Hälfte des Containers)]
Dieses Beispiel zeigt, wie flex-grow-Werte proportionales Größenverhalten erzeugen und eine feingranulare Kontrolle über die Elementerweiterung ermöglichen.
Zusammenfassung
In diesem Labyrinth erkunden die Teilnehmer die flex-grow-Eigenschaft in CSS Flexbox, indem sie eine strukturierte HTML-Datei erstellen und einen flexiblen Container mit mehreren <div>-Elementen implementieren. Das Labyrinth beginnt mit der Einrichtung einer grundlegenden HTML-Struktur mit einem Container und drei Kind-Boxen, um die grundlegende Einrichtung für Flexbox-Experimente zu demonstrieren.
Durch fortschreitende CSS-Stillegung lernen die Teilnehmer, wie sie einen Standard-Container in ein Flexbox-Layout umwandeln, indem sie die flex-grow-Eigenschaft anwenden, um zu verstehen, wie sich Elemente dynamisch erweitern und verfügbaren Platz verteilen. Der praxisorientierte Ansatz ermöglicht es den Teilnehmern, mit unterschiedlichen flex-grow-Werten zu experimentieren und zu beobachten, wie numerische Verhältnisse die Größe und Verteilung von Elementen im Flex-Container beeinflussen.
