flex-grow

The flex-grow property is a sub-property of the Flexible Box Layout module.

IT defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.

Syntax

flex-grow: <number>

.flex-item {
  flex-grow: 2;
}

Demo

The following demo shows how the remaining space is being calculated according to the different values of flex-grow (see on CodePen for better understanding).

Check out this Pen!

All items have a flex-grow value of 1 except the 3rd one which has a flex-grow value of 2. It means when the available space is distributed, the 3rd flex-item will have twice as much space as others.

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

Comments

  1. Sergey
    Permalink to comment#

    All Safari not supported flex-grow

  2. Jonatan
    Permalink to comment#

    Perfectly explained. Clear and to the point. Thanks.

  3. Peter
    Permalink to comment#

    “For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.”

    This isn’t correct? It’s my understanding that flex-grow distributes the available white-space, it does not control the final width of the element. The child with flex-grow set to 2, would only be twice as wide if none of the children have any content.

    You can see that in the CodePen example; as soon as you start entering more text in one flex-item box, the widths of all the boxes change.

    Flex-grow distributes available white-space, not the absolute width, at least in my understanding.

  4. Sandy
    Permalink to comment#

    Well Explained !!!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.