In past lessons, we looked at working with flex containers. In addition to this, the flex elements that lie inside the container also have many different rules. In this lesson, we'll look at flex-grow rules that allow you to control the flexibility of elements, i.e., dynamically define their width/height depending on our needs.
Let's take three blocks arranged in a flex container as an example. We'll also do these examples in CodePen, so be sure to change the values in them and see what results this leads to.
The flex-grow property (which comes from the term flex grow factor) allows you to specify the rate that an element increases in size relative to the free space inside the flex container. Free space refers to the difference between the size of the flex container and the size of all the elements inside. This is important because many sources indicate that the flex-grow property increases the size of the element relative to other elements in the container.
The flex-grow property can take any non-negative value. To understand what it means to get bigger relative to free space, let's give all blocks the flex-grow property with the same value:
One might imagine that such a value would evenly distribute the space inside the flex container. And this would be true in an almost empty block, but let's add text to one of the blocks and see how flex-grow works in that case:
Now the blocks aren't the same width at all. This demonstrates that flex-grow only distributes the free space that remains after the blocks get all the width they need, depending on the content inside. In fact, all the flex-grow values, in this case, are unnecessary because the blocks inside the container are already going to take up all the available width. Let's try to add a little more content to the center block and set it to different values:
Example 0
The container has a width of 700 pixels. We've done it like that so that we can calculate how the flex-grow property works. The central block is 300 pixels wide and the outermost blocks are 100 pixels wide. The free space is grayed out and equals 200 pixels.
Example 1
By removing the flex-grow property from all blocks except the second, we're telling the center block to stretch to its full available width. Since we have 200 pixels of free space, the center block will take it, and the width of the center block will become 500 pixels.
Example 2
Let's keep flex-grow: 1 on the center block, and set the first element inside the container to flex-grow: 2. Try to guess how the space will be distributed? To understand this process, we need to take the total number of parts that we specified in flex-grow. There are three of these parts(flex-grow: 1 + flex-grow: 2).
Calculate what one part equals if we know that we have 200 pixels of free space:
flex-grow: 1 = 200 / 3 = 66.67.
Based on this, you can calculate how many pixels will be added to each block using the flex-grow property:
- The center block will add another 66.67 pixels to its width
- The first block inside the container adds 133.34 pixels to its width
It's important that flex-grow only adds to the width of the element, and doesn't take away from it. If there's no free space inside the container, then the flex-grow property will have no visible effect.
Note that with flex-direction: column; the flex-grow property will affect the height of the element. I.e., flex-grow increases the size of the element along the main axis.
Docs
- flex-grow
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
