本文讲解如何使用 Flexbox 的 flex-wrap: wrap 属性，使并排显示的页面容器（每个含多张表格）在视口宽度不足时自动垂直堆叠，避免内容被强制压缩，确保第三列固定宽度（10em）的表格结构保持可读性。
本文讲解如何使用 flexbox 的 `flex-wrap: wrap` 属性，使并排显示的页面容器（每个含多张表格）在视口宽度不足时自动垂直堆叠，避免内容被强制压缩，确保第三列固定宽度（10em）的表格结构保持可读性。
在现代 CSS 布局中，Flexbox 是处理一维排列（行或列）最直观高效的方案。但需注意一个关键原则：display: flex 仅作用于其直接子元素，且默认行为是 flex-wrap: nowrap——即所有子项强行挤在同一行，超出容器时发生收缩或溢出，而非换行。
本例中，外层容器 <div id="pages"> 包含两个 .page 元素，每个 .page 内部又包含两张表格。当前问题在于：当屏幕变窄（例如移动设备），两个 .page 无法并排容纳时，浏览器默认会压缩它们的宽度（影响 10em 第三列的显示），而非将第二个 .page 移至下一行。
解决方法非常简洁：为 #pages 添加 flex-wrap: wrap。这将允许其子元素（即两个 .page）根据可用空间自动换行。配合合理的 min-width 或 flex-basis（可选），能进一步增强响应鲁棒性。
以下是修正后的核心 CSS：
div#pages {
display: flex;
gap: 1em;
flex-wrap: wrap; /* ? 关键声明：启用换行 */
}
div.page {
border: 1px solid gray;
padding: 1em;
display: flex;
gap: 1em;
/* 可选：防止过小屏幕下 .page 被过度压缩 */
flex: 1 1 calc(50% - 1em); /* 初始宽度约50%，保留gap空间 */
min-width: 300px; /* 确保最小可读宽度 */
}✅ 为什么只改 #pages？
因为 flex-wrap 控制的是该 flex 容器内直接子项的换行行为。.page 内部的 display: flex 用于水平排列两张表格，无需换行（且 nowrap 是默认值），故无需修改；真正需要换行的是两个 .page，因此只需在它们的父容器 #pages 上启用 wrap。
同时建议补充一点健壮性优化：为 .page 设置 min-width（如 300px），避免在极窄视口下被压扁失真；也可用 flex: 1 1 auto 配合媒体查询实现更精细的断点控制。
最终效果：
- 宽屏下：两个 .page 并排，间距 1em；
- 中等宽度（如平板）：若总宽不足，则第二个 .page 自动换行到底部，保持自身完整尺寸；
- 移动端：单列堆叠，每页内表格仍水平排列，第三列始终维持 10em 宽度，内容清晰可读。
? 小结：Flexbox 的换行能力常被忽略，但 flex-wrap: wrap 是实现响应式多栏布局的轻量级利器。记住——它不改变子项内部结构，只决定子项在主轴上的排列方式；合理组合 flex, min-width, gap 和 flex-wrap，即可在不依赖 Grid 或媒体查询的前提下，达成优雅的流式响应。
