Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

CSS flex-direction 属性指定了内部元素是如何在flex容器中布局的,定义了主轴的方向。(是正向的或是相反的)

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. 

初始值row
适用元素flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

语法

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

flex-direction: inherit

取值

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.

语法格式

row | row-reverse | column | column-reverse

例子

element { 
  flex-direction: row-reverse;
}

规范

Specification Status Comment
CSS Flexible Box Layout Module
flex-direction
Candidate Recommendation  

浏览器兼容性

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

10 -ms
11

12.10

7 -webkit

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? 未实现 12.10 未实现

[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.

参考

<link href="chrome-extension://bicdefpoleoohkhgcbbhambpghigfeid/build/index.css" rel="stylesheet">

文档标签和贡献者

 此页面的贡献者: zhaochangok, jingchenxu, fscholz, Go7hic, Sebastianz, FredWe
 最后编辑者: zhaochangok,