flex-direction

Avatar of

DigitalOcean 为您旅程的每个阶段提供云产品。开始使用 200 美元的免费积分!

flex-direction 属性是 弹性盒子布局模块 的子属性。它建立了主轴,从而定义了弹性容器中弹性项目排列的方向。

.element {
  flex-direction: column-reverse;
}

提醒:弹性容器的主轴是弹性项目沿其布局的主要轴线。注意,它不一定是水平的;它取决于 flex-direction 属性。

flex-direction 属性接受四个可能的值

  • row:与文本方向相同(默认)
  • row-reverse:与文本方向相反
  • column:与 row 相同,但从上到下
  • column-reverse:与 row-reverse 相同,从上到下

请注意,rowrow-reverse 受弹性容器的方向性影响。如果其文本方向为 ltr,则 row 表示从左到右方向的水平轴,row-reverse 表示从右到左方向;如果方向为 rtl,则相反。

语法

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

演示

在下面的演示中

  • 红色列表设置为 row
  • 黄色列表设置为 row-reverse
  • 蓝色列表设置为 column
  • 绿色列表设置为 column-reverse

注意:文本方向没有被编辑。

所以基本上,您将在大多数情况下使用 row,或者在某些情况下使用 column。否则,反转方向顺序的情况非常少见。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
10 1
11
全部20-48 2
49+ 3
21-28 4
29+
7-8 4
9+
12.1+
iOS
Safari
Chrome AndroidFirefox AndroidAndroid 浏览器Opera Mobile
7-8.4 4
9+
92+90+92+12.1+
来源:caniuse
  • 1 使用前缀 -ms 支持
  • 2 部分支持
  • 3 使用前缀 -moz- 支持
  • 4 使用前缀 -webkit- 支持

有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用 Flexbox”DevOpera 的这篇文章

更多信息

order