LabEx
AnmeldenKostenlos beitreten

Verstehen Sie die flex-grow-Eigenschaft in CSS Flexbox

CSSCSSBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

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 wir flex-grow demonstrieren 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 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.

Die Anfangswerte und Vererbungswerte von flex-grow untersuchen

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.
  • inherit nimmt den flex-grow-Wert aus dem übergeordneten Container.
  • initial setzt 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.

Numerische flex-grow-Werte für verschiedene Elemente festlegen

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 mit 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.

Verwandt CSS Kurse
Schnellstart mit CSS

Schnellstart mit CSS

CSS
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger
Erstellen eines Whack-a-Mole-Webspiels

Erstellen eines Whack-a-Mole-Webspiels

HTMLCSSJavaScript
Anfänger