本文详解如何利用 CSS Flexbox 的 flex-wrap: wrap 配合合理的宽度控制，使两个 div 在宽屏下并排、窄屏下自动垂直堆叠，实现真正响应式的垂直布局。
本文详解如何利用 css flexbox 的 `flex-wrap: wrap` 配合合理的宽度控制，使两个 div 在宽屏下并排、窄屏下自动垂直堆叠，实现真正响应式的垂直布局。
在现代网页开发中，“两个 div 在大屏并排、小屏垂直堆叠”是典型的响应式布局需求。你当前的代码已接近正确方案，但存在几个关键问题需修正和优化，才能稳定达成目标效果。
✅ 正确实现逻辑：Flex + Wrap + 可控子项宽度
你的 .container 已设置 display: flex 和 flex-wrap: wrap，这是核心基础——flex-wrap: wrap 的作用正是：当子元素总宽度超出容器时，自动换行到下一行。但要触发换行，必须满足一个前提：子元素的宽度之和 > 容器可用宽度。
而你当前的 .container-part { width: 50%; } 在大多数情况下（尤其小屏）仍可能因边框、内边距或四舍五入导致“刚好不换行”，造成布局卡顿。更可靠的做法是：
- 使用 min-width 替代（或补充）固定百分比宽度；
- 修正 HTML 中的 class 名拼写错误（container-par → container-part）；
- 添加 box-sizing: border-box 避免边框/内边距撑破宽度。
✅ 推荐修复后的完整代码：
<div class="container"> <div class="container-part">1</div> <div class="container-part">2</div> </div>
.container {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐使用 gap 替代 margin，语义清晰且自动避让 */
}
.container-part {
flex: 1; /* 弹性伸缩，优先占满空间 */
min-width: 300px; /* 关键！设定最小宽度，小屏下自然触发 wrap */
box-sizing: border-box; /* 确保 padding/border 不增加计算宽度 */
padding: 12px;
background-color: #f9f9f9;
}? 为什么 min-width 比 width: 50% 更可靠？
- width: 50% 在视口宽度为 600px 时，每个子项宽 300px，总宽 ≈ 600px + gap → 刚好不换行，但若存在滚动条、字体渲染差异或浏览器缩放，极易临界失效；
- min-width: 300px 明确告诉浏览器：“每个子项至少需要 300px”，当视口 < 616px（300×2 + gap），必然换行，行为可预测、跨浏览器一致。
? 进阶建议：搭配媒体查询精准控制断点
如需在特定尺寸（如 768px 平板）才切换为垂直堆叠，可进一步增强控制：
@media (max-width: 768px) {
.container-part {
min-width: 100%; /* 强制单列，完全垂直堆叠 */
}
}此时无论内容多少，小屏下始终严格上下排列，且保留 flex 的对齐优势（如 align-items: center 垂直居中内容）。
⚠️ 注意事项总结
- ✅ 务必修正 HTML 中 container-par 的拼写错误，否则第二个 div 不会应用样式；
- ✅ flex-wrap: wrap 本身不改变主轴方向（默认 row），无需额外设 flex-direction；
- ❌ 避免混合使用 float 或 inline-block —— 与 Flex 冲突，易引发不可控行为；
- ✅ 推荐用 gap 而非 margin 控制间距，它不参与 flex 计算，更健壮；
- ? 所有现代浏览器（Chrome 29+, Firefox 28+, Safari 6.1+, Edge 12+）均原生支持 flex-wrap，兼容性极佳。
通过以上调整，你的两个 div 将在桌面端优雅并排，在手机端无缝垂直堆叠——无需 JavaScript，纯 CSS 驱动，语义清晰、维护成本低，是响应式布局的标准实践。
