Latest web development tutorials

HTML DOM Style flexGrow property

Style Object Reference Style Objects

Examples

Let the blue DIV element extended to other flexible project five times:

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

try it"

Definition and Usage

flexGrow attribute specifies the project will be flexible with respect to other items in the same container volume expansion.

Note: If theelement is not flexible items, flexGrow property does not work.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox, Opera and Chrome support flexGrow property.


grammar

Back flexGrow properties:

object .style.flexGrow

Setting flexGrow properties:

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

Property Value

描述
number 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

technical details

Defaults: 0
return value: String representing the flex-grow attributes of the element.
CSS version CSS3


related articles

CSS Reference Manual: Flex-Grow property

HTML DOM STYLE Reference: Flex Properties

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


Style Object Reference Style Objects