CSS flex-grow property

Description

CSS flex-grow determines how much the flex item should expand to fill the remaining space relative to the other flex items.

Negative values are not allowed.

Syntax

flex-grow : +ve integer

Property values

+ve integerDefault 0: The flex items do not expand to fill the remaining space.; flex-grow: 0;
Try it
+ve integer 1: The flex items expand to fill the free remaining space relative to the other items.; flex-grow: 1;
Try it

Applicable to

It applies to flex items.

Preview

Code

CSS

.parent{
display:flex;
width:250px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}
.child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}

HTML

<div class="parent">
<p class="child">#First 1</p>
<p class="child">#Second 2</p>
<p class="child">#Third 3</p>
<p class="child">#Third 4</p>
<p class="child">#Third 5</p>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to