Style flexGrowProperty
Style ObjectExamples
Make the blue DIV element expand to five times the size of other flexible items:
document.getElementById("myBlueDiv".style.flexGrow = "5";
Try it yourself »
Definition and Usage
The flexGrow property specifies the amount by which the item will expand relative to other flexible items in the same container.
Note:If the element is not a flexible item, the flexGrow property has no effect.
Browser Support
Firefox, Opera, and Chrome support the flexGrow property.
Syntax
Return the flexGrow property:
object.style.flexGrow
Set the flexGrow property:
object.style.flexGrow="number|initial|inherit"
Property Values
| Value | Description |
|---|---|
| number | A number specifying how much the item will expand relative to other flexible items. Default value is 0. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | 0 |
|---|---|
| Return value: | A string representing the element's flex-grow property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference:flex-grow property
HTML DOM STYLE Reference:flex property
HTML DOM STYLE Reference:flexBasis property
HTML DOM STYLE Reference:flexDirection property
HTML DOM STYLE Reference:flexFlow property
HTML DOM STYLE Reference:flexShrink property
HTML DOM STYLE Reference:flexWrap property
Other Extensions