DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 免费额度!
flex-flow
属性是 弹性盒布局模块 的子属性。 它 是 flex-direction
和 flex-wrap
的简写。
.element {
flex-flow: row wrap;
}
语法
flex-flow: <‘flex-direction’> || <‘flex-wrap>;
无论顺序如何,您可以指定一个或两个值。
演示
两个列表的行为完全相同
- 蓝色的一个具有
flex-direction: row
和flex-wrap: wrap
- 红色的一个具有
flex-flow: row wrap
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10 1 11 | 全部 | 20-48 2 49+ 3 | 21-28 4 29+ | 7-8 4 9+ | 12.1+ |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
7-8.4 4 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 支持前缀
-ms
- 2 部分支持
- 3 支持前缀
-moz-
- 4 支持前缀
-webkit-
有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用 Flexbox” 和 DevOpera 的这篇文章。
嗨,Chris,
只是提醒一下,flex-flow: row wrap;(简写或长写)目前只在 Chrome 和 Opera 中支持。其他浏览器还不支持“换行”行。
这是您在 Firefox 22、Chrome 27 和 Safari 6 中的 codepen。
更多信息请访问
https://mdn.org.cn/en-US/docs/Web/CSS/flex-flow
除了 IE 的一些错误(有解决方法),现在的支持已经相当不错了。
https://caniuse.cn/#feat=flexbox
<
script>
你好
<
script>
错误,请忽略
<
script>
alert(“Hello”);
<
script>
错误,请忽略
有没有办法将 flex-container 居中?我在这里尝试了一些技巧,但 flex-container 总是对齐到左侧。
margin: 0 auto;
以及一些其他方法:https://css-tricks.org.cn/centering-css-complete-guide/