We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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
Animation typediscrete
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.
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

Tag del documento e collaboratori

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