这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
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 type | discrete |
正规顺序 | 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 |
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.