MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Summary

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
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

Syntax

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

Values

The following values are accepted:

row
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.
row-reverse
Behaves the same as row but the main-start and main-end points are permuted.
column
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.
column-reverse
Behaves the same as column but the main-start and main-end are permuted.

Examples

element { 
  flex-direction: row-reverse;
}

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-direction' in that specification.
Last Call Working Draft  

Browser compatibility

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 Not supported
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? Not supported 12.10 Not supported

[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

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: fscholz, Sebastianz, Andrea_Barghigiani
 Ultima modifica di: fscholz,