移动端隐藏侧栏时.main不占满全宽，因display: none使flex容器只剩一个子项，flex: 0 1 auto失去参照而无法按剩余空间计算；正确做法是用visibility: hidden+width: 0+flex: 0 0 0保留参与布局计算。
移动端隐藏侧栏时为什么不占满全宽？
直接用 display: none 隐藏 .left 和 .right，.main 就会变窄——因为 flex 容器只剩一个子项，flex: 0 1 auto 失去参照对象，不再按“三栏剩余空间”计算宽度。
正确做法是让侧栏仍参与 flex 计算但不可见：
.left, .right { visibility: hidden; width: 0; overflow: hidden; flex: 0 0 0; }- 或改用
flex-direction: column+order重构流：在媒体查询里设.main { order: 1; }，.left { order: 2; }，.right { order: 3; } - 别在 column 模式下漏掉
width: 100%和box-sizing: border-box，否则长文本会撑宽整列
为什么 flex: 1 在移动端更容易塌缩？
移动端视口窄，flex: 1（即 flex: 1 1 0%）会让 .main 从零宽度开始瓜分空间，内容少时直接缩成一条线，尤其左右栏设了固定宽（如 240px）后更明显。
必须用 flex: 0 1 auto + min-width: 0：
-
flex-grow: 0阻止它盲目撑大 -
flex-shrink: 1允许它在窄屏下收缩 -
flex-basis: auto确保先按内容自然宽度展开 -
min-width: 0是关键补丁，防止内部 inline 元素（比如未换行的长 URL）导致 flex 计算失效
父容器高度来源不可靠，flex: 0 1 auto 就白写
真正卡住人的往往不是 CSS 写错，而是外层约束没理清。比如：
- 某层祖先用了
max-width: 1200px，截断主轴宽度计算 - 父级有
transform或overflow: hidden，flex 子项高度/宽度参考系丢失 - 外层
min-height: 100vh被 viewport meta 标签或 iOS Safari 的地址栏高度干扰
验证方式很简单：临时给父容器加 outline: 1px solid red，看它的实际渲染尺寸是否符合预期。
用 Bootstrap 4 时别套用 .row 类
Bootstrap 4 的 .row 默认设了 display: flex 和 margin，会和你手写的 order、flex 属性冲突，尤其在嵌套或响应式断点切换时容易错位。
稳妥做法是完全弃用 .row 和 .col：
- 自定义容器类如
.holy-grail-container - 复用 Bootstrap 的断点变量（如
@media (min-width: 768px)），但不用它的栅格类 - 如果必须兼容 IE11，优先选浮动 + 负 margin 方案，flex 的
order在 IE11 中行为异常
最容易被忽略的是 HTML 结构本身：<main></main> 必须在源码最前，哪怕视觉上它居中——所有焦点顺序、打印样式、SEO 权重都按这个来，order 只管眼睛看见的，不管机器读到的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
