Latest web development tutorials

HTML DOM Style flexFlow property

Style Object Reference Style Objects

Examples

Flexible project to make the columns displayed, and not split columns:

document.getElementById("main").style.flexFlow="column nowrap";

try it"

Definition and Usage

flexFlow property is a shorthand property flexDirection and flexWrap properties.

flexDirection attribute specifies the direction of the flexible project.

flexWrap attribute specifies flexible project is split row or column split.

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


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox, Opera and Chrome support flexFlow property.


grammar

Back flexFlow properties:

object .style.flexFlow

Setting flexFlow properties:

object .style.flexFlow="flex-directionflex-wrap |initial|inherit"

Property Value

描述
flex-direction 可能的值:

row
row-reverse
column
column-reverse
initial
inherit

默认值是 "row"。

规定灵活项目的方向。

flex-wrap 可能的值:

nowrap
wrap
wrap-reverse
initial
inherit

默认值是 "nowrap"。

规定灵活项目是否拆行或拆列。

initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

technical details

Defaults: row nowrap
return value: String representing the flex-flow properties of the element.
CSS version CSS3


related articles

CSS Reference Manual: Flex-Flow Properties

HTML DOM STYLE Reference: Flex Properties

HTML DOM STYLE Reference: flexBasis property

HTML DOM STYLE Reference: flexDirection property

HTML DOM STYLE Reference: flexGrow property

HTML DOM STYLE Reference: flexShrink property

HTML DOM STYLE Reference: flexWrap property


Style Object Reference Style Objects