本文讲解如何使用 flex-wrap: wrap 控制 Flex 容器内子元素（如并排的页面容器）在空间不足时自动换行，而非强制缩小内容；核心在于理解 Flex 的作用层级与默认不换行行为。
本文讲解如何使用 `flex-wrap: wrap` 控制 flex 容器内子元素（如并排的页面容器）在空间不足时自动换行，而非强制缩小内容；核心在于理解 flex 的作用层级与默认不换行行为。
在使用 Flexbox 实现多列布局时，一个常见误区是：仅设置 display: flex 就认为子元素会“智能响应”。实际上，Flex 容器默认启用 flex-wrap: nowrap —— 这意味着所有直接子元素将被强制排列在一行内，即使总宽度超出容器，浏览器也会通过收缩（shrink）子项来勉强容纳，而非换行。
本例中，#pages 是最外层 Flex 容器，其直接子元素是两个 .page（即左右两页）。每个 .page 内部又用 Flex 排列两张表格。问题本质在于：当前 #pages 缺少换行声明，导致两个 .page 在窄屏下被压缩，而非自然折行。
✅ 正确解法只需为 #pages 添加一行关键声明：
div#pages {
display: flex;
gap: 1em;
flex-wrap: wrap; /* ? 核心修复：允许子元素换行 */
}添加后，当视口宽度不足以同时容纳两个 .page（含 10em 宽度的第三列及间距）时，第二个 .page 将自动下沉至下一行，保持自身尺寸不变，实现真正的响应式布局。
⚠️ 注意事项：
- flex-wrap 只作用于该 Flex 容器的直接子元素（此处是 .page），不影响 .page 内部的表格布局；
- 确保 .page 元素本身具有明确的宽度或最小宽度（如 min-width: 300px），避免过小导致意外换行（本例中因表格结构较宽，通常无需额外设置）；
- 若需控制换行后的对齐方式（如两端对齐、居中等），可配合 justify-content（主轴）和 align-content（交叉轴多行）使用；
- 避免重复声明 display: flex（原文 CSS 中 .page 规则里出现了两次，属冗余，应保留一次即可）。
? 扩展建议：
如需更精细的断点控制（例如仅在
@media (max-width: 767px) {
div#pages {
flex-wrap: wrap;
}
}
但本场景中，flex-wrap: wrap 本身已具备流式响应能力，无需 JS 或复杂条件判断——这正是 Flexbox “开箱即用”的响应式优势。
