编辑“︁CSS弹性流”︁

{{DISPLAYTITLE:CSS弹性流}}

'''CSS弹性流'''（Flex Flow）是[[CSS弹性盒布局]]（Flexbox）中的一个复合属性，用于同时定义'''flex-direction'''（主轴方向）和'''flex-wrap'''（换行行为）。它简化了弹性容器的布局控制，使开发者能够更高效地管理项目的排列方式。

== 概述 ==
弹性流是弹性盒模型的核心控制机制之一，通过组合主轴方向和换行规则，决定弹性项目（flex items）在容器内的排列方式。其语法为：
<syntaxhighlight lang="css">
flex-flow: <flex-direction> <flex-wrap>;
</syntaxhighlight>

=== 相关概念 ===
* '''主轴（Main Axis）'''：由<code>flex-direction</code>定义的方向（水平或垂直）。
* '''交叉轴（Cross Axis）'''：与主轴垂直的轴。
* '''换行（Wrapping）'''：控制项目是否在空间不足时换行显示。

== 属性值详解 ==
=== flex-direction ===
定义主轴方向，可选值：
{| class="wikitable"
|+ 主轴方向选项
! 值 !! 描述 !! 主轴方向
|-
| <code>row</code> || 默认值，水平从左到右 || →
|-
| <code>row-reverse</code> || 水平从右到左 || ←
|-
| <code>column</code> || 垂直从上到下 || ↓
|-
| <code>column-reverse</code> || 垂直从下到上 || ↑
|}

=== flex-wrap ===
控制项目是否换行，可选值：
{| class="wikitable"
|+ 换行行为选项
! 值 !! 描述
|-
| <code>nowrap</code> || 默认值，不换行（可能溢出容器）
|-
| <code>wrap</code> || 空间不足时换行
|-
| <code>wrap-reverse</code> || 换行且反向排列
|}

== 代码示例 ==
=== 基础用法 ===
<syntaxhighlight lang="css">
.container {
  display: flex;
  flex-flow: row wrap; /* 水平排列且允许换行 */
}
</syntaxhighlight>

=== 对比单属性定义 ===
以下两组代码等效：
<syntaxhighlight lang="css">
/* 使用复合属性 */
.container-1 {
  flex-flow: column nowrap;
}

/* 使用单独属性 */
.container-2 {
  flex-direction: column;
  flex-wrap: nowrap;
}
</syntaxhighlight>

== 视觉化示例 ==
<mermaid>
flowchart LR
  A[flex-flow: row wrap] --> B[水平排列\n允许换行]
  C[flex-flow: column-reverse nowrap] --> D[垂直反向\n禁止换行]
</mermaid>

== 实际应用场景 ==
=== 响应式导航栏 ===
<syntaxhighlight lang="css">
.navbar {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
</syntaxhighlight>
'''效果'''：在小屏幕空间不足时，导航项自动换行显示。

=== 卡片布局 ===
<syntaxhighlight lang="css">
.card-grid {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}
</syntaxhighlight>
'''效果'''：卡片按行排列，空间不足时自动换行形成网格。

== 高级技巧 ==
=== 动态方向切换 ===
结合媒体查询实现响应式布局：
<syntaxhighlight lang="css">
.container {
  flex-flow: column wrap;
}

@media (min-width: 768px) {
  .container {
    flex-flow: row nowrap;
  }
}
</syntaxhighlight>

=== 数学关系 ===
换行后的对齐可通过以下公式计算剩余空间：
<math>
剩余空间 = 容器尺寸 - \sum_{i=1}^{n} (项目尺寸_i + 间隔_i)
</math>

== 浏览器兼容性 ==
所有现代浏览器均支持<code>flex-flow</code>属性，包括：
* Chrome 29+
* Firefox 28+
* Safari 9+
* Edge 12+
* Opera 17+

== 常见问题 ==
=== 为什么项目不换行？ ===
1. 检查容器是否有固定高度（<code>column</code>方向时）
2. 确认<code>flex-wrap</code>值不是<code>nowrap</code>
3. 验证项目是否设置了<code>flex-shrink</code>（默认允许收缩）

=== 如何实现反向换行？ ===
使用<code>wrap-reverse</code>时，新行会出现在容器的'''上方'''（水平主轴）或'''左侧'''（垂直主轴）。

== 最佳实践 ==
* 优先使用<code>flex-flow</code>而非单独属性，提高代码可读性
* 在移动端布局中，结合<code>wrap</code>实现自适应
* 测试不同方向下的内容溢出情况

{{Flexbox导航}}

[[Category:CSS属性]]
[[Category:网页布局]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS弹性盒布局]]