编辑“︁CSS弹性换行”︁（章节）

= CSS弹性换行 =

== 介绍 ==
'''CSS弹性换行'''（Flexbox Wrapping）是CSS弹性盒布局（Flexbox）的核心功能之一，允许弹性容器内的项目在空间不足时自动换行到新行（或新列）。通过控制<code>flex-wrap</code>属性，开发者可以灵活管理项目的排列方式，避免内容溢出或压缩变形。此特性在响应式设计中尤为重要，能适应不同屏幕尺寸的布局需求。

== 语法与属性值 ==
弹性换行通过<code>flex-wrap</code>属性实现，其可选值如下：
<syntaxhighlight lang="css">
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
</syntaxhighlight>

* '''nowrap'''（默认值）：所有项目强制单行排列，可能溢出容器或压缩项目宽度。
* '''wrap'''：项目按顺序换行，第一行在上方。
* '''wrap-reverse'''：项目换行但反向排列，第一行在下方。

== 基础示例 ==
以下代码展示三种换行效果的区别：

=== 输入 ===
<syntaxhighlight lang="html">
<div class="container nowrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- 共10个项目 -->
</div>
<div class="container wrap">
  <!-- 同上 -->
</div>
<div class="container wrap-reverse">
  <!-- 同上 -->
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.container {
  display: flex;
  width: 300px;
  border: 2px solid #333;
  margin-bottom: 20px;
}
.item {
  width: 100px;
  height: 50px;
  background: #42a5f5;
  margin: 5px;
}
.nowrap { flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }
.wrap-reverse { flex-wrap: wrap-reverse; }
</syntaxhighlight>

=== 输出效果 ===
* '''nowrap'''：10个项目挤在单行，宽度压缩或溢出容器。
* '''wrap'''：项目每行显示3个，共4行（最后一行可能不全）。
* '''wrap-reverse'''：换行后首行在底部，向上堆叠。

== 进阶控制 ==
结合<code>flex-direction</code>可控制换行方向。例如，垂直排列时换行会形成新列：

<syntaxhighlight lang="css">
.container {
  flex-direction: column;
  height: 200px;
  flex-wrap: wrap;
}
</syntaxhighlight>

=== 流程图解 ===
<mermaid>
graph TD
  A[flex-direction: row] --> B[换行形成新行]
  C[flex-direction: column] --> D[换行形成新列]
</mermaid>

== 实际应用场景 ==
=== 响应式导航栏 ===
在窄屏幕上将菜单项换行显示：
<syntaxhighlight lang="css">
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.nav-item {
  min-width: 120px;
}
</syntaxhighlight>

=== 卡片网格布局 ===
动态调整卡片行列数：
<syntaxhighlight lang="css">
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 200px; /* 基础宽度200px，可伸缩 */
}
</syntaxhighlight>

== 数学原理 ==
换行触发条件取决于容器尺寸与项目总宽度。设：
* 容器宽度：<math>W_c</math>
* 项目宽度：<math>W_i</math>
* 项目数量：<math>n</math>

当<math>\sum_{i=1}^{n} W_i > W_c</math>时，<code>wrap</code>会使项目换行。

== 浏览器兼容性 ==
所有现代浏览器均支持<code>flex-wrap</code>，包括：
* Chrome 4+（带-webkit前缀）
* Firefox 28+
* Safari 6.1+
* Edge 12+

== 最佳实践 ==
1. 始终为弹性项目设置<code>flex-basis</code>或固定尺寸。
2. 使用<code>gap</code>替代<code>margin</code>控制间距。
3. 测试极端内容（如超长文本）下的换行表现。

== 参见 ==
* [[CSS弹性盒布局]]（父主题）
* [[CSS网格布局]]（替代方案）

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