CSS flex-direction Property

Flex-direction is a sub-property of the flexible box layout module. It established the flexible item's main axis. The primary axis is the flex item's main axis. It is not always horizontal; it is primarily determined by the flex-direction property.

Note: The flex property is ineffective when the element is not a flexible item.




Property Values

Value Description
row The default value. The flexible items are displayed in a row horizontally.
row-reverse Row is the same as row, but in reverse order.
column The flexible items are arranged in a column and displayed vertically.
column-reverse Column is the same as the row, but in reverse order.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
flex-direction 29.0
21.0 -webkit-
18.0 -moz-
6.1 -webkit-
11.0 17.0