Style flexGrow attribute

Definition and Usage

flexGrow This attribute specifies how much the item will grow relative to other flexible items within the same container.

Note:If the element is not a flexible item, then flexGrow Invalid attribute.

See also:

CSS Reference Manual:flex-grow attribute

Example

Make the blue DIV element grow five times compared to other flexible items:

document.getElementById("myBlueDiv").style.flexGrow = "5";

Try It Yourself

Syntax

Return flexGrow attribute:

object.style.flexGrow

Set flexGrow attribute:

object.style.flexGrow = "number|initial|inherit"

Attribute Value

Value Description
number A number that specifies the increment of the item relative to other flexible items. The default value is 0.
initial Set this attribute to its default value. See initial.
inherit Inherit this attribute from its parent element. See inherit.

Technical Details

Default value: 0
Return value: A string representing the element's flex-grow attribute.
CSS Version: CSS3

Browser Support

The numbers in the table indicate the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 11.0 Support 9.0 Support

Related Pages

HTML DOM STYLE Reference Manual:flex attribute

HTML DOM STYLE Reference Manual:flexBasis attribute

HTML DOM STYLE Reference Manual:flexDirection attribute

HTML DOM STYLE Reference Manual:flexFlow attribute

HTML DOM STYLE Reference Manual:flexShrink attribute

HTML DOM STYLE Reference Manual:flexWrap attribute