CSS flex-grow property

The flex-grow property is a CSS property used in Flexbox layouts to control how flex items grow relative to one another to fill the available space along the main axis. It is part of the flexible sizing behavior of Flexbox, allowing you to distribute extra space among the flex items.

The syntax of the flex-grow property is as follows:

flex-grow: <number>;

• <number>: It is a unitless number that represents the proportion of the available space a flex item should take up compared to other flex items in the same flex container. The default value is 0, which means the flex item will not grow and will maintain its initial size defined by the flex-basis property.

If there is extra space available along the main axis of the flex container (after accommodating the flex items’ initial size), the flex-grow property determines how this extra space is distributed among the flex items. The more a flex item’s flex-grow value is compared to others, the more it will grow relative to them.

Example:

.container {
  display: flex;
}

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

In this example, the .container is a flex container, and the .item elements are flex items. The flex-grow property is set to 1, which means all flex items have equal ability to grow and will share any extra space equally. The flex-basis property is set to 100px, which sets the initial size of each flex item to 100px.

If there is additional space available along the main axis of the flex container (due to the container being wider than the total width of all flex items), each flex item will receive an equal share of the extra space, making them grow equally.

The flex-grow property is useful for creating flexible and responsive layouts, allowing elements to expand and fill the available space proportionally based on their flex-grow values. It’s often used together with other Flexbox properties, such as flex-basis and flex-shrink, to achieve more complex and adaptive layouts.