本文讲解如何利用 Flexbox 的 flex-wrap 与 min-width 配合，使原本并排的两个 div 在视口变窄时自动垂直堆叠，实现真正可控的响应式断点布局。
本文讲解如何利用 flexbox 的 `flex-wrap` 与 `min-width` 配合，使原本并排的两个 div 在视口变窄时自动垂直堆叠，实现真正可控的响应式断点布局。
在现代前端开发中，使用 display: flex 是实现多列布局最简洁、语义最清晰的方式。但仅设置 flex-wrap: wrap 并不能保证“屏幕缩小就换行”——它只在子项总宽度超出父容器可用空间时才触发换行。若子项宽度假设为 50%，在极小屏幕（如 320px）下，两个 160px 宽的 div 仍能并排显示，无法达到预期的“堆叠”效果。
关键在于：控制子项何时“拒绝压缩”，从而强制父容器触发换行。解决方案是为 .container-part 设置 min-width，配合 flex: 1 或 flex: 0 1 auto 实现弹性收缩临界点。
✅ 正确写法（含修复与增强）：
.container {
border: 2px solid black;
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 1rem; /* 推荐替代 margin，更可控 */
}
.container-part {
flex: 1; /* 主动参与弹性分配 */
min-width: 300px; /* 关键！当视口 < 600px 时，两列无法共存 → 自动换行 */
/* width: 50%; ← 移除固定百分比，交由 flex 管理 */
}<div class="container"> <div class="container-part">1</div> <div class="container-part">2</div> <!-- 注意：原文中 class 名拼写错误 "container-par" 已修正 --> </div>
? 核心原理说明：
- flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: auto，表示子项可伸缩，且初始尺寸由内容或 min-width 决定；
- min-width: 300px 意味着每个子项最小不可再压缩至 300px 以下；
- 当父容器宽度 < 300px × 2 + gap（即约 620px），Flex 容器检测到空间不足，立即触发 flex-wrap: wrap，将第二个 .container-part 推至下一行。
? 进阶建议：
- 若需精确控制断点（如仅在 <768px 时堆叠），可结合媒体查询：
@media (max-width: 767px) { .container-part { min-width: 100%; /* 单列占满全宽 */ flex: none; /* 禁用弹性，确保严格单列 */ } } - 使用 gap 替代 margin 控制间距，避免因外边距塌陷或计算误差影响换行判断；
- 始终校验 HTML 类名拼写（如原文中 container-par 应为 container-part），否则样式不生效。
⚠️ 注意事项：
- flex-wrap: wrap 对 flex-direction: column 无效（此时换行为“换列”，非所需效果），请保持默认 row；
- IE10–11 支持 flex-wrap，但需避免使用 gap（可降级为 margin）；
- 不要同时设置 width 和 flex，后者会覆盖前者，造成行为不可预测。
总结：真正的响应式不是“靠猜屏幕尺寸”，而是通过 min-width 设定内容最小可读宽度，让 Flex 布局依据实际可用空间智能决策——这是现代 CSS 布局思维的核心转变。
