Latest web development tutorials

HTML DOM Style flex properties

Style Object Reference Style Objects

Examples

Let all the flexibility of the project with the same length and ignore their contents:

for (i = 0; i < y.length; i++) {
    y[i].style.flex="1";
}

try it"

Definition and Usage

flex properties relative to the same flexible container for other items, sets or returns the length of the project.

flex property is a shorthand property flexGrow, flexShrink and flexBasis properties.

Note: If theelement is not flexible project, the flex property does not work.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

In addition to Safari, all other major browsers support flex properties.

IE 9 and earlier versions do not support flex properties. IE 10 need only prefix MS support this property.


grammar

Returns flex properties:

object .style.flex

Setting flex properties:

object .style.flex="flex-growflex-shrinkflex-basis|auto|initial|inherit"

Property Value

描述
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值,即为 0 1 auto。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

technical details

Defaults: 0 1 auto
return value: String representing the flex attribute element.
CSS version CSS3


related articles

CSS 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: flexGrow property

HTML DOM STYLE Reference: flexShrink property

HTML DOM STYLE Reference: flexWrap property


Style Object Reference Style Objects