flex-flow 弹性流简写属性
最后更新：2026-09-13
flex-flow flex-flow 弹性流简写属性
flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写形式，用于一次性定义弹性容器的主轴方向和项目是否换行。由于这两个属性通常需要配合使用，使用 flex-flow 可以让代码更简洁。它的默认值为 row nowrap，即水平排列且不换行。
| 分类 | |
|---|---|
| 初始值 | row nowrap |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
flex-flow: <flex-direction> || <flex-wrap>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<flex-direction> || <flex-wrap> | 值 | 方向与换行简写 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-flow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| 所有主流浏览器均支持 | |||||
提示： flex-flow 的两个值可以任意顺序书写，例如 flex-flow: wrap column 等价于 flex-flow: column wrap，浏览器会自动识别。
提示： 由于 flex-direction 和 flex-wrap 几乎总是一起设置，推荐使用 flex-flow 简写以提高代码可读性和编写效率。
❓ 常见问题
Qflex-flow 可以只写一个值吗？
A可以。只写一个值时浏览器按类型判断：值是 row/column 等方向值，flex-wrap 用默认 nowrap；值是 wrap/nowrap 等换行值，flex-direction 用默认 row。
Qflex-flow 和分别设置 flex-direction、flex-wrap 有性能差异吗？
A没有性能差异。flex-flow 是纯语法层面的简写，浏览器解析后与分别写 flex-direction、flex-wrap 效果完全一致。选择哪种写法只是代码风格问题：同时设置两个语义时用 flex-flow 更紧凑；需要单独覆盖某一项、或在媒体查询里只改换行时，拆开写便于局部修改。
Qflex-flow: column wrap 和 flex-flow: wrap column 有区别吗？
A没有区别。flex-flow 是 flex-direction 与 flex-wrap 的简写，规范用 || 表示两值顺序可调换，所以 column wrap 与 wrap column 效果相同。注意主轴为 column 时换行发生在水平方向，新列排在右侧。
🏷️ 相关属性
💡 相关案例
📚 相关教程
