本文讲解如何利用 Flexbox 的 flex-wrap 与子项最小宽度约束，实现两个 div 在大屏时并排、小屏时自动垂直堆叠的响应式布局，避免因内容溢出导致布局错乱。
本文讲解如何利用 flexbox 的 `flex-wrap` 与子项最小宽度约束，实现两个 div 在大屏时并排、小屏时自动垂直堆叠的响应式布局，避免因内容溢出导致布局错乱。
在现代前端开发中，单纯依赖 display: flex 和 flex-wrap: wrap 并不能自动触发“小屏堆叠”——关键在于子元素是否具备可换行的触发条件。你提供的代码中，.container-part 设置了 width: 50%，这在宽屏下能稳定并排；但当视口宽度缩小（如手机端），若 .container-part 内容或内边距导致实际占用宽度 > 50vw，或浏览器计算精度偏差，就可能因总宽度略微超限而意外换行——但更常见的情况是：它根本不会换行，而是横向溢出或压缩变形。
为什么？因为 flex-wrap: wrap 的换行逻辑并非基于“屏幕尺寸”，而是基于父容器剩余空间是否足以容纳下一个 flex 项的主轴最小尺寸。而默认情况下，flex 项的 min-width 是 auto（即内容最小宽度），而非 0 —— 这意味着即使设了 width: 50%，只要内容（如文字、图片）无法被压缩到更窄，该 div 就会坚持“至少显示完整内容”，从而阻止换行。
✅ 正确解法：显式设置 min-width 或结合媒体查询精准控制
方案一：用 min-width 触发自然换行（推荐）
为 .container-part 添加 min-width: 0 或具体阈值（如 min-width: 320px），配合 flex: 1 1 50%，让 flex 项在空间不足时主动收缩并换行：
.container {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐替代 margin，更可控 */
}
.container-part {
flex: 1 1 50%; /* 等价于 width: 50%; flex-grow: 1; flex-shrink: 1; */
min-width: 320px; /* 关键！设定最小宽度阈值，低于此值则换行 */
box-sizing: border-box; /* 确保 padding/border 不撑宽 */
}
⚠️ 注意：你代码中存在拼写错误 —— 第二个 div 的 class 应为 container-part，而非 container-par，否则样式不生效。
方案二：用媒体查询强制堆叠（语义更清晰）
当需要明确区分“桌面并排 / 移动堆叠”两态时，媒体查询更直观、可控：
.container {
display: flex;
flex-wrap: wrap;
border: 2px solid black;
}
.container-part {
flex: 1 1 50%;
box-sizing: border-box;
}
/* 小屏下取消并排，改为单列堆叠 */
@media (max-width: 768px) {
.container-part {
flex: 1 1 100%; /* 占满整行 */
min-width: 100%;
}
}
方案三：使用 flex-direction: column 配合 @container（前沿方案）
若项目支持现代 CSS（Chrome 117+、Safari 16.4+），可结合容器查询实现更精细的上下文响应：
@container (max-width: 400px) {
.container {
flex-direction: column;
}
.container-part {
width: 100%;
}
}
? 关键总结：
- flex-wrap: wrap 本身不会“按屏幕尺寸”换行，它只响应父容器主轴可用空间不足；
- 换行触发取决于子项的 min-width + flex-shrink 能力，而非单纯 width: 50%；
- 生产环境强烈建议同时设置 box-sizing: border-box 和 gap，避免 margin 引发的计算误差；
- 修复 HTML 拼写错误（container-par → container-part）是功能生效的前提；
- 对兼容性要求高的项目，优先采用媒体查询方案；追求简洁维护性，推荐 min-width + flex 组合。
最终效果：大屏下左右平分，小屏下自动垂直堆叠，无溢出、无空白、无 JS 干预——这才是健壮的响应式 Flex 布局实践。
