flex-direction

Avatar of
on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main-axis, thus defining the direction flex items are placed in the flex container.

.element {
  flex-direction: column-reverse;
}

Reminder: the main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property.

The flex-direction property accepts four possible values:

  • row: same as text direction (default)
  • row-reverse: opposite to text direction
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse top to bottom

Note that row and row-reverse are affected by the directionality of the flex container. If its text direction is ltr, row represents the horizontal axis oriented from left to right, and row-reverse from right to left; if the direction is rtl, it’s the opposite.

Syntax

flex-direction: row | row-reverse | column | column-reverse

Demo

In the following demo:

  • Red list is set to row
  • Yellow list is set to row-reverse
  • Blue list is set to column
  • Green list is set to column-reverse

Note: The text direction hasn’t been edited.

So basically, you will use row in most cases, or column under certain circumstancies. Otherwise, it is pretty uncommon to reverse direction order.

Browser support

IEEdgeFirefoxChromeSafariOpera
10 1
11
All20-48 2
49+ 3
21-28 4
29+
7-8 4
9+
12.1+
iOS
Safari
Chrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
7-8.4 4
9+
92+90+92+12.1+
Source: caniuse
  • 1 Supported with prefix -ms
  • 2 Partial support
  • 3 Supported with prefix -moz-
  • 4 Supported with prefix -webkit-

For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.

More information