手机端两栏流式布局不推荐用“两栏”思路，而是默认单栏、仅在中大屏启用 display: flex + flex: 1；真要强撑两栏，必须加 min-width: 0 和 box-sizing: border-box，否则文字或图片极易溢出横向滚动条。
直接给结论：手机端两栏流式布局不推荐用“两栏”思路，而是默认单栏、仅在中大屏启用 display: flex + flex: 1；真要强撑两栏，必须加 min-width: 0 和 box-sizing: border-box，否则文字或图片极易溢出横向滚动条。
为什么手机上硬写两栏会翻车
所谓“两栏流式”，常被误解为“左右并排+自适应”，但手机屏幕宽度窄、内容密度高，强行分栏会导致：text-overflow 失效、长单词撑破容器、img 溢出、padding 叠加计算错误。根本原因不是 Flex 写错了，而是主轴空间本就不够，却还要求两个子项同时存在且不换行。
- Flex 默认
flex-wrap: nowrap，内容超宽时不会自动折行，而是横向溢出 - 子项没设
min-width: 0，浏览器按最小内容宽（比如一个长 URL）强制撑开，flex: 1失效 -
padding或border在content-box下额外加宽，进一步挤占可用空间
真正能跑通的手机两栏写法（慎用）
如果业务强依赖小屏双列（如对比表格、双语言对照），必须满足三个前提：
- 父容器明确设
width: 100%或max-width，不能靠fit-content或无约束继承 - 每个子项都加
min-width: 0，解除默认最小宽度限制 - 所有内边距统一用
box-sizing: border-box，避免尺寸叠加
示例代码：
.container {
display: flex;
width: 100%;
}
.left, .right {
min-width: 0;
box-sizing: border-box;
}
.left {
flex: 0 0 50%;
}
.right {
flex: 1;
}
注意：flex: 0 0 50% 比 width: 50% 更安全——它禁用伸缩，又允许收缩，避免内容撑爆。
更合理的响应式切换逻辑
绝大多数场景下，“手机两栏”本质是误判需求。正确路径是：默认单栏堆叠 → 中屏（≥768px）启双栏 → 大屏（≥1024px）再优化间距。关键不是“怎么让两栏在手机显示”，而是“什么时候不该让它显示”：
- 移动端优先写法：根容器默认
display: block，只在@media (min-width: 768px)里加display: flex - 切回单栏时，务必重置子项
flex值为flex: none，否则 IE/旧安卓 WebView 可能仍参与高度计算 - 若需视觉顺序调整（比如侧栏语义在前，但移动端要显示在内容下方），用
order而非改 HTML 结构
IE11 和低端安卓 WebView 的兼容补丁
这些环境对 flex: 1 解析异常，尤其当父容器无显式 width 时，主区域可能塌缩为 0：
- 父容器补
width: 100%（哪怕它本该是自动的） - 侧栏改用
flex: 0 0 auto+width: 120px双保险 - 主区域写成
flex: 1 1 0+min-width: 0 - 放弃
gap，用margin控制间距（gap在 IE11 完全不支持）
最易被忽略的一点：flex 子项内部如果有 white-space: nowrap 或未设 overflow: hidden 的文本块，min-width: 0 也救不了——得在文本层单独加 max-width: 100% 或 word-break: break-word。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
