The **`flex-grow`** property in #key# CSS: Cascading Style Sheets #key# is used to define the extent to which an item will grow in comparison to the other flex items present in the same container.



> Note: There is no effect of this property on non-flexible items. 

# 
#  Syntax

---
```css
flex-grow: number|initial|inherit;
```
---

# 
## Property values

- **`Number`**: Its default value is 0. It is used to specify how much the flex item will grow. 

- **`Initial`**: It sets the value to its default value.

- **`Inherit`**: It inherits the property from its parent value.

##
## Code

The basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `flex-grow` property is as follows:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box larger">Box 2 (larger)</div>
  <div class="box">Box 3</div>
</div>

.container 
{
  font: 16px sans-serif;
  background: rgb(29, 173, 149);
  color: white;
  height: 200px;
  border: 1px solid black;
  display: flex;
}
.box 
{
  padding: 10px;
  flex-grow: 1;
}
.larger 
{
  background: rgb(27, 29, 122);
  flex-grow: 5;
}

codemirror

# 
## Explanation
In the above example,  we apply the `flex-grow` property on `Box 1` and `Box 3`,  and the size is one; therefore, they are smaller in size. But the `flex-grow` property is set to be 5 and as a result, its size is more than the other two boxes. We can also set the values according to our choice.

What is the CSS flex-grow property?

Syntax

Property values

Code

Explanation