Mastering CSS Flex-Grow for Dynamic Layouts

Introduction

The flex-grow CSS property is a powerful tool for web developers, allowing you to control how flex items grow within a flex container. This property helps you create dynamic and responsive layouts that adapt to different screen sizes and devices. By adjusting the flex-grow value, you can ensure a seamless user experience.

flex-grow has been widely supported across all major browsers since September 2015, making it a reliable choice for your web projects.

Flex Grow Factor

The flex grow factor is a number you assign to each flex item using the flex-grow property. This factor determines how much of the container’s extra space each item should receive. Here’s how it works:

• Default Value: The default value is 0, meaning the item won’t grow to fill extra space.
• Equal Grow Factors: If all items have the same grow factor (e.g., flex-grow: 1), the extra space is distributed equally.
• Different Grow Factors: If items have different grow factors, the space is distributed proportionally.

For example, if one item has flex-grow: 2 and another has flex-grow: 1, the first item will receive twice as much extra space as the second.

Example Scenario

Consider a flex container with three items:

• Item 1: flex-grow: 1
• Item 2: flex-grow: 2
• Item 3: flex-grow: 3

If the container has 600px of extra space, it will be distributed as follows:

• Item 1 grows by 100px (1/6 of the space).
• Item 2 grows by 200px (2/6 of the space).
• Item 3 grows by 300px (3/6 of the space).

This distribution is based on the ratio of the grow factors (1:2:3).

Distributing Positive Free Space

The flex-grow property helps distribute the extra space within a flex container. Here’s how it works:

1. Calculate Total Grow Factors: Sum up the grow factors of all items.
2. Divide Extra Space: Divide the extra space by the total grow factor.
3. Assign Space to Items: Each item gets space equal to its grow factor times the space per grow factor unit.

Example:

Consider a flex container with four items:

• Item 1: flex-grow: 0
• Item 2: flex-grow: 1
• Item 3: flex-grow: 2
• Item 4: flex-grow: 3

If the container has 700px total width and the items’ combined sizes are 400px, there’s 300px of extra space.

1. Total Grow Factors: 1 + 2 + 3 = 6
2. Space per Grow Factor Unit: 300px / 6 = 50px
3. Distribution:
   • Item 1: 0 * 50px = 0px (no growth)
   • Item 2: 1 * 50px = 50px
   • Item 3: 2 * 50px = 100px
   • Item 4: 3 * 50px = 150px

After distribution, the total sizes of the items would be:

• Item 1: 100px (original size)
• Item 2: 150px (100px + 50px)
• Item 3: 200px (100px + 100px)
• Item 4: 250px (100px + 150px)

Using flex-grow with flex, flex-shrink, and flex-basis

The flex-grow property is often used with other flex properties like flex, flex-shrink, and flex-basis to create more complex layouts.

flex-shrink

The flex-shrink property determines how much a flex item should shrink when there isn’t enough space. It works similarly to flex-grow but in the opposite direction.

flex-basis

The flex-basis property sets the default size of a flex item before the remaining space is distributed.

The flex Shorthand

The flex property is a shorthand for setting flex-grow, flex-shrink, and flex-basis:

flex: <flex-grow> <flex-shrink> <flex-basis>;

Example:

.item {
  flex: 1 1 200px;
}

In this example, the item starts at 200px and can grow or shrink as needed.

Combining Properties

You can combine flex-grow with flex-shrink and flex-basis:

.container {
  display: flex;
}

.item1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

.item2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}

.item3 {
  flex-grow: 3;
  flex-shrink: 1;
  flex-basis: 200px;
}

This ensures a dynamic layout that adapts to different screen sizes.

Formal Definition

The flex-grow property is defined as a single <number> that specifies the flex grow factor of a flex item.

Syntax:

flex-grow: <number>;

Example:

.item {
  flex-grow: 1;
}

In this example, the flex item will grow to fill available space proportionally.

Example: Setting Flex Item Grow Factor

In this example, we have a flex container with six items. Three items have a flex-grow value of 1, and the other three have a value of 2. This means items with a grow factor of 2 will grow twice as much as those with a grow factor of 1.

HTML

<h1>This is a <code>flex-grow</code> example</h1>
<p>
  A, B, C, and F have <code>flex-grow: 1</code>. D and E have
  <code>flex-grow: 2</code>.
</p>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>

CSS

#content {
  display: flex;
}

div > div {
  border: 3px solid rgb(0 0 0 / 20%);
}

.small {
  flex-grow: 1;
}

.double {
  flex-grow: 2;
}

Result

Items A, B, C, and F each get an equal share of the remaining space, while items D and E get twice as much space.

Example: Multiple Elements with Different Flex-Grow Values

This example demonstrates multiple div elements with different flex-grow values to show how they grow relative to each other.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Grow Multiple Values</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            background-color: lightgray;
        }

        .container div {
            background-color: cornflowerblue;
            margin: 10px;
            padding: 20px;
            text-align: center;
            color: white;
        }

        .grow1 {
            flex-grow: 1;
        }

        .grow2 {
            flex-grow: 2;
        }

        .grow3 {
            flex-grow: 3;
        }
    </style>
</head>

<body>
    <h2>CSS flex grow</h2>
    <div class="container">
        <div class="grow1">1</div>
        <div class="grow2">2</div>
        <div class="grow3">3</div>
    </div>
</body>

</html>

Result

The three flex items have different flex-grow values (1, 2, and 3 respectively). The first item grows once as much as its original size, the second item grows twice as much, and the third item grows three times as much. The result is a visually balanced layout where the items grow proportionally to their specified grow factors.

Example: Using Flex-Grow with Flex, Flex-Shrink, and Flex-Basis

This example shows how to use flex-grow in conjunction with flex, flex-shrink, and flex-basis to create a more dynamic layout.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Grow with Other Properties</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            background-color: lightgray;
        }

        .container div {
            background-color: cornflowerblue;
            margin: 10px;
            padding: 20px;
            text-align: center;
            color: white;
        }

        .item1 {
            flex: 1 1 100px;
        }

        .item2 {
            flex: 2 1 150px;
        }

        .item3 {
            flex: 3 1 200px;
        }
    </style>
</head>

<body>
    <h2>CSS flex grow with other properties</h2>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>

</html>

Result

The three flex items have different flex shorthand values. The first item has a flex-grow value of 1, a flex-shrink value of 1, and a flex-basis value of 100px. The second item has a flex-grow value of 2, a flex-shrink value of 1, and a flex-basis value of 150px. The third item has a flex-grow value of 3, a flex-shrink value of 1, and a flex-basis value of 200px.

This means that the first item will start at 100px and can grow or shrink as needed. The second item will start at 150px and can grow twice as much as the first item. The third item will start at 200px and can grow three times as much as the first item. The result is a dynamic layout that adapts to the available space, ensuring a balanced and visually appealing user experience.

Specifications

The flex-grow property is defined in the CSS Flexible Box Layout Module Level 1 specification. This specification outlines the behavior and usage of the flex-grow property, ensuring consistency across different browsers and platforms.

Browser Compatibility

The flex-grow property is widely supported across all modern browsers, ensuring that your web projects will display consistently across various devices and platforms. Here is a summary of the browser compatibility:

• Google Chrome: Supported since version 29.0 (August 2013)
• Firefox: Supported since version 28.0 (March 2014)
• Internet Explorer/Edge: Supported since version 11.0 (October 2013)
• Opera: Supported since version 17.0 (August 2013)
• Safari: Supported since version 9.0 (September 2015)

Supported Browsers

The flex-grow property is supported by the following browsers:

• Google Chrome: 5.0
• Edge: 12
• Mozilla Firefox: 4.0
• Safari: 5.0
• Opera: 11.1

FAQs

What does the flex-grow property do in CSS?

The flex-grow property in CSS controls how much a flex item will grow relative to the other items inside a flex container when extra space is available. It defines the proportion of space that the item should take up.

How do I make a flex item take up all available space?

You can make a flex item take up all available space by setting flex-grow: 1;. This allows the item to grow and fill the container, sharing space with other flex items that also have a flex-grow value set.

What happens if multiple items have the same flex-grow value?

If multiple items have the same flex-grow value, they will share the available space equally. For example, if three items each have flex-grow: 1;, they will each take up one-third of the extra space.

Can I set flex-grow to a value greater than 1?

Yes, setting flex-grow to a value greater than 1 gives the item a larger proportion of space compared to others. For example, an item with flex-grow: 2 will grow twice as much as an item with flex-grow: 1.

What is the default value of flex-grow?

The default value of flex-grow is 0, meaning the item will not grow to take up extra space unless explicitly set.

Can I animate flex-grow?

Yes, you can animate flex-grow using numbers for smooth transitions.

What if flex-grow is negative?

Negative values don’t work with flex-grow. Stick to numbers 0 and above.

How does flex-grow work with flex-direction?

flex-grow stretches items along the main axis set by flex-direction (could be width or height).

Can I use flex-grow with grid layouts?

No, flex-grow is for Flexbox only. Use grid-template-columns and grid-template-rows for grids.

Do all browsers support flex-grow?

Yes, all modern browsers support flex-grow.

Where can I learn more about flex-grow and Flexbox?

Check out MDN Web Docs, CSS-Tricks, and the official Flexbox spec for great guides and tutorials.

By understanding the flex-grow property and its various aspects, you can create dynamic and responsive web layouts that enhance the user experience across different devices and screen sizes.