CSS Flexbox #4. The flex-grow Property

The flex-grow property specifies how a flex-item inside the flex container will grow – along the main axis – relative to its sibling items, taking into account the available space inside the flex container.

This tutorial will show you how to use the flex-grow property with an example.

Let’s start!

Step # 1. Create the HTML

• Open your preferred code editor.
• Create an empty HTML file.
• Visit this page, copy the HTML code and save the file.

Step # 2. The CSS Styles

• Create a file called style.css (the file is already linked in the tag of the HTML code).
• Copy and paste the following code:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Step # 3. The CSS Flexbox Styles

Declare the parent container as the flex container.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; }

As I’ve already mentioned, the flex-items position themselves into the flex container, as if they were inline elements. But what if you want to distribute the whole available space of the flex container between each one of the items according to a fixed proportion?

Let’s suppose that the second item has to be twice as wide as the first and third items. That’s what the flex-grow property is for.

• Edit the CSS file:

.item1 { flex-grow: 1; } .item2 { flex-grow: 2; } .item3 { flex-grow: 1; }

Now, the second item takes twice as much space, as the other two items. If you resize your browser window, you’ll notice that the second item will keep this proportion, if there’s enough space available considering the width of the viewport.

The second item is still twice as wide as the other ones at a width of 768px.

At a width of 375px, the second item does not have enough space in the container to be twice as wide as the other two items (considering the content inside them) so the available space will be distributed equally between all three items.

Flex-grow in Column Based Layout

When working on the block axis, it is important to remember that the height of items is by default set to auto This means that each flex-item is only as high as the content inside it.

In order to test the flex-grow property on the block axis, you have to declare a fixed height for the flex container.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-direction: column; height: 90vh; }

The second item is now twice as high as the other two items, according to the available vertical space within the flex container (which has a fixed width). This makes sense if you have a fixed design and you know exactly the size of the content. The flex-grow property will not work if the content of one of the items is higher than the height the item is supposed to have.

• Edit the HTML code:

<div class="container"> <div class="item item1">1</div> <div class="item item2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur eos dolores impedit nulla delectus illo dolorum quas, laudantium voluptatem iusto ab tempore porro, earum aliquid debitis repudiandae magni aperiam reiciendis natus odit explicabo. Ut deleniti ea autem voluptatem, explicabo neque modi atque recusandae commodi molestiae quasi itaque repellat similique debitis pariatur aliquid ipsam soluta error doloremque ab quas. Soluta, nemo!</div> <div class="item item3">3</div> </div>

Conclusion

The flex-grow property allows distributing the available space in the flex container between all flex-items inside it, according to the relative proportions between the flex-items.

Thanks for reading!

Previous tutorials of this series

• CSS Flexbox #1. Creating Your First Flexbox Layout
• CSS Flexbox #2. How to Use the justify-content Property
• CSS Flexbox #3. The align-items property