flex-flow

Avatar of

DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 免费额度!

flex-flow 属性是 弹性盒布局模块 的子属性。 它 是 flex-directionflex-wrap 的简写。

.element {
  flex-flow: row wrap;
}

语法

flex-flow: <‘flex-direction’> || <‘flex-wrap>;

无论顺序如何,您可以指定一个或两个值。

演示

两个列表的行为完全相同

  • 蓝色的一个具有 flex-direction: rowflex-wrap: wrap
  • 红色的一个具有 flex-flow: row wrap

浏览器支持

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 的这篇文章

更多信息