This translation is incomplete. Please help translate this article from English


La proprietà CSS flex-direction specifica come gli elementi flex vengono disposti all'interno di un contenitore flex definendo l'asse principale e la direzione (normale o invertita).

Note that the value row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

Initial valuerow
Applies toflex containers
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.


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

flex-direction: inherit


The following values are accepted:

The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
Behaves the same as row but the main-start and main-end points are permuted.
The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
Behaves the same as column but the main-start and main-end are permuted.


element { 
  flex-direction: row-reverse;


Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-direction' in that specification.
Candidate Recommendation  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1] [2]
20.0 (20.0) [2]
21.0-webkit 11 12.10 No support
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? No support 12.10 No support

[1] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

[2] Multi-line flexbox are supported since Firefox 28.

See also