Style flexFlow attribute

Definition and Usage

flexFlow This attribute is flexDirection and flexWrap Abbreviated attribute of the property.

flexDirection This attribute specifies the direction of the flexible item.

flexWrap This attribute specifies whether the flexible item should wrap.

Note:If the element is not a flexible item, then flexFlow Attribute is invalid.

See also:

CSS Reference Manual:flex-flow attribute

Example

Display flexible items in columns without wrapping:

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

Try It Yourself

Syntax

Return flexFlow attribute:

object.style.flexFlow

Set flexFlow attribute:

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

Attribute Value

Value Description
flex-direction

Possible values:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

The default value is "row".

Specifies the direction of the flexible items.
flex-wrap

Possible values:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

The default value is "nowrap".

Specifies whether the flexible item should wrap.
initial Set this attribute to its default value. See initial.
inherit Inherit this attribute from its parent element. See inherit.

Technical Details

Default value: row nowrap
Return value: A string representing the element's flex-flow 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:flexGrow attribute

HTML DOM STYLE Reference Manual:flexShrink attribute

HTML DOM STYLE Reference Manual:flexWrap attribute