CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Properties

CSS3 flex-shrink attribute CSS3 flex-flow attribute

CSS3 flex-Usage and examples of grow attribute

flex-The grow CSS attribute specifies the growth method of the flex item relative to other items in the flex container.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

Default value:	0
Applicable to:	Elastic items
Inheritance:	No
Animated:	Yes.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.flexGrow="1"

flex-grow usage syntax

The syntax of this attribute is as follows:

flex-grow: number | initial | inherit

The following examples demonstrate how to use flex-grow attribute.

Example

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-grow:　1;　/*　Safari　6.1+　*/
　　　　flex-grow:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-grow:　3;　/*　Safari　6.1+　*/
　　　　flex-grow:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-grow:　5;　/*　Safari　6.1+　*/
　　　　flex-grow:　5;
}

Test and see‹/›

Attribute value

The following table describes the value of this attribute.

Value	Description
number	A positive number used to determine the elastic item'sElastic growthCoefficient. The default value is 0. Negative numbers are invalid.
initial	Set this property to its default value.
inherit	If specified, the associated elements adopt the flex of their parent element-grow attribute values.

Browser compatibility

flex-Browser compatibility of grow attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

For further reading

Please refer to the following tutorial:CSS3Multi-column layout.

CSS3 flex-shrink attribute CSS3 flex-flow attribute