Understand flex-grow Property in CSS Flexbox

Introduction

In this lab, participants will explore the flex-grow property in CSS Flexbox, a powerful layout technique for creating responsive and flexible web designs. Through a step-by-step approach, learners will create an HTML file, set up a flexbox container, and experiment with different flex-grow values to understand how elements dynamically expand and distribute available space.

The lab guides students through creating a basic HTML structure, defining a flexbox container, and applying flex-grow properties to child elements. By setting numeric values and observing how boxes proportionally grow, participants will gain practical insights into controlling layout flexibility and understanding the nuanced behavior of flex-grow in web design.

Create HTML File and Set Up Basic Structure

In this step, you'll create the foundational HTML file for exploring the flex-grow property in CSS Flexbox. We'll set up a basic HTML structure and prepare the environment for our flexbox demonstration.

First, navigate to the project directory and create an HTML file:

cd ~/project
touch index.html

Now, open the index.html file in the WebIDE and add the following HTML structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox flex-grow Demonstration</title>
    <style>
      /* CSS styles will be added in subsequent steps */
    </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>

This basic HTML structure includes:

A container <div> that will become our flexbox container
Three child <div> elements representing boxes we'll use to demonstrate flex-grow
A placeholder <style> section where we'll add CSS in later steps

Example output when viewing the file:

[HTML file created with basic structure and three div boxes]

The file is now ready for further CSS Flexbox exploration in the upcoming steps.

Define Flexbox Container with flex-grow Property

In this step, you'll learn how to define a flexbox container and understand the basic concept of the flex-grow property. Open the index.html file in the WebIDE and modify the <style> section to create a flexbox container.

Add the following CSS to define the flexbox container:

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

Let's break down the CSS:

display: flex; turns the container into a flex container
width: 100%; makes the container span the full width
.box styles define the appearance of individual flex items

Example output when viewed in a browser:

[Three green boxes displayed in a horizontal row, filling the container]

The flex-grow property determines how flex items grow relative to each other when extra space is available. By default, flex-grow is set to 0, meaning items won't grow beyond their initial size.

To see the default behavior, open the HTML file in a web browser. You'll notice the boxes maintain their initial size and don't expand to fill the container.

Explore flex-grow Initial and Inherit Values

In this step, you'll investigate the default and inherited behaviors of the flex-grow property. Open your index.html file and update the <style> section to explore these concepts.

First, let's understand the initial value of 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;
    /* Initial flex-grow is 0 by default */
    /* flex-grow: 0; */
  }

  .box1 {
    /* Explicitly setting initial value */
    flex-grow: 0;
  }

  .box2 {
    /* Demonstrating inheritance */
    flex-grow: inherit;
  }

  .box3 {
    /* Another way to show initial state */
    flex-grow: initial;
  }
</style>

Key observations:

flex-grow: 0; is the default value, meaning items won't grow
inherit takes the flex-grow value from the parent container
initial resets the property to its default value (0)

Example output when viewed in a browser:

[Three green boxes of equal width, not expanding to fill container]

To further illustrate, you can modify the HTML to show how these values work:

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

This example demonstrates that by default, flex items maintain their initial size and do not grow to fill extra space in the container.

Set Numeric flex-grow Values for Different Elements

In this step, you'll learn how to use numeric values with flex-grow to control how flex items expand within a container. Open your index.html file and update the <style> section to explore different numeric flex-grow values.

Update your CSS with the following styles:

<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 will grow 1 unit */
    flex-grow: 1;
  }

  .box2 {
    /* Box 2 will grow 2 units */
    flex-grow: 2;
  }

  .box3 {
    /* Box 3 will grow 3 units */
    flex-grow: 3;
  }
</style>

Update the HTML to match the new styles:

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

Key observations:

flex-grow values determine how extra space is distributed
Higher values mean more growth relative to other items
Total available space is divided proportionally

Example output when viewed in a browser:

[Three green boxes with different widths:
 - Box 1 is narrowest (1 unit)
 - Box 2 is wider (2 units)
 - Box 3 is widest (3 units)]

The boxes will now expand differently based on their flex-grow values, demonstrating how you can control element sizing in a flex container.

Experiment with flex-grow Proportions

In this step, you'll explore more complex flex-grow proportions and understand how different values interact within a flex container. Update your index.html file with the following 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>

Key concepts to understand:

Total flex-grow values: 1 + 2 + 1 + 4 = 8
Box 1 and Box 3 get 1/8 of extra space each
Box 2 gets 2/8 of extra space
Box 4 gets 4/8 (half) of extra space

Example output when viewed in a browser:

[Four colored boxes with different widths:
 - Box 1 and Box 3: Narrow (1/8 each)
 - Box 2: Slightly wider (2/8)
 - Box 4: Widest (4/8 or half the container)]

This example demonstrates how flex-grow values create proportional sizing, allowing fine-grained control over element expansion.

Summary

In this lab, participants explore the flex-grow property in CSS Flexbox by creating a structured HTML file and implementing a flexible container with multiple div elements. The lab begins by setting up a basic HTML structure with a container and three child boxes, demonstrating the foundational setup for flexbox experiments.

Through progressive CSS styling, learners discover how to transform a standard container into a flexbox layout, applying the flex-grow property to understand how elements dynamically expand and distribute available space. The hands-on approach allows participants to experiment with different flex-grow values, observing how numeric proportions influence the sizing and distribution of flex container elements.

Understand flex-grow Property in CSS Flexbox

Introduction

Create HTML File and Set Up Basic Structure

Define Flexbox Container with flex-grow Property

Explore flex-grow Initial and Inherit Values

Set Numeric flex-grow Values for Different Elements

Experiment with flex-grow Proportions

Summary

Other CSS Tutorials you may like