What does flex-grow do?

CSSJunior~1 min read

flex-grow determines whether an element can grow to take up free space in the container, and in what proportions relative to other flex items.

Principle:

flex-grow: 0: the element does not grow (the default value)
flex-grow: 1: the element fills the free space
if several elements have different values, the space is divided proportionally

Example:

css

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

If free space remains, it will be distributed like this:

item2 will get 2 times more than item1 and item3
the final distribution: 1 : 2 : 1

In short: flex-grow is responsible for how much an element expands to take up extra space.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.