Suggest an editImprove this articleRefine the answer for “What does flex-grow do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`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; the default value `0` means the element does not grow. **Key point:** `flex-grow` is responsible for how much an element expands to take up extra space.Shown above the full answer for quick recall.Answer (EN)Image`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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.