Style flex-direction attribute

Definition and usage

flexDirection Set or return the direction of the flexible item.

Note:If the element is not a flexible item, then flexDirection Invalid attribute.

See also:

CSS Reference Manual:flex-direction attribute

Example

Reorder the direction of flexible items within the <div> element:

document.getElementById("main").style.flexDirection = "column-reverse";

Try it yourself

Syntax

Return flex-direction attribute:

object.style.flexDirection

Set flex-direction attribute:

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

Attribute value

Value Description
row Default value. The flexible items are displayed horizontally as a row.
row-reverse Same as row, but in reverse order.
column The flexible items are displayed vertically as a column.
column-reverse Same as column, but in reverse order.
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
Return value: A string that represents the element's flex-direction 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:flexFlow attribute

HTML DOM STYLE Reference Manual:flexGrow attribute

HTML DOM STYLE Reference Manual:flexShrink attribute

HTML DOM STYLE Reference Manual:flexWrap attribute