CSS flex-grow - grow flex item if needed

CSS flex-grow – grow flex item if needed

on Sep 9, 2016

CSS flex-grow property lets a flex item to grow if needed. Its initial value is 0. That mean by default flex item does not grow. It can take any positive value. All flex items grow in proportion of their flex-grow value.

Syntax:

.someflexcontainer {
  display: flex;
}
.flexitem {
  flex-grow: 1;
}

CSS property flex-grow

CSS version:	CSS 3
Value:	number
Initial:	0
Applies to:	flex items
Inherited:	no

Example – flex-grow

In the following code, CSS property flex-grow can be changed to the following values

<style>
.fbox {
  display: flex;
  width: 250px; background-color:gray;
}
.child {
  background-color:green;
  padding: 3px; margin: 3px;
  flex-grow: 0;
}
</style>

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>

flex-grow refresh

try it online