flex-grow property

Sets the flex grow factor for the flex item.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name flex-grow, which is preferred for better standards compliance and future compatibility.

This property is read/write.

IE11

 

Syntax

flex-grow: <number>

Property values

To control how the flex item grows relative to other items in the flex container, use the following.

<number>

A positive number that determines the flex grow factor of the flex item. Negative numbers are invalid.

CSS information

Applies Toflex items
Mediavisual
Inheritedno
Initial Value0

Remarks

The flex grow factor is a multiplier that determines how much a flex item grows relative to the other items in the flex container.

This property can also be specified within the shorthand flex property.

Examples

In the following example, there are three flex items inside of the flex container.



<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>


In the CSS snippet, flex-grow is set to different values for each flex item. The flex-grow values 10, 5, and 1 determine how the respective flex item will grow to fill the flex container relative to the other flex items. The image below shows the flex container with the three flex items.

A flex container with three flex items


#flexContainer {
   display: flex;
}
#item1 {
   width: 50px;
   background: #66CC33;
   flex-grow: 1;
}
#item2 {
   width: 50px;
   background: #0099FF;
   flex-grow: 5;
}
#item3 {
   width: 50px;
   background: #66CC33;
   flex-grow: 10;
}


The following image shows the flex container that has been resized larger than the original size of the flex container. When flex-grow is set to a higher value, like 10 for flex item 3, it will grow to take up more of the flex container relative to the other flex items, like below.

A flex container with flex-grow properties set

Requirements

See also

CSSStyleDeclaration
Flexible box layout (Windows)
flex

 

 

Show:
© 2014 Microsoft