圣杯布局核心在于中间栏用flex: 0 1 auto（先按内容展开再收缩）、<main>置于HTML最前、侧栏隐藏用visibility: hidden而非display: none，三者缺一不可。
直接用 display: flex 就能实现圣杯布局，但写错一行就塌缩、换行或焦点错乱——核心不在“能不能”，而在中间栏的 flex 值、DOM 顺序和侧栏隐藏方式这三处。
为什么 flex: 1 在中间栏会塌缩？
因为 flex: 1 等价于 flex: 1 1 0%，第三个参数 0% 表示从零宽度开始按比例分配空间。内容少时，浏览器真把它压成一条线，尤其左右侧栏越宽，中间越窄。
- 正确写法是
flex: 0 1 auto：先按内容自然宽度展开，再允许收缩（不放大） - 必须给中间栏加
min-width: 0，否则内部 inline 元素（如长文本、图片）会撑破容器导致溢出 - 如果父容器没明确高度参照（比如没设
min-height: 100vh或没继承html, body { height: 100% }），flex: 0 1 auto也会失效
HTML 结构顺序为什么不能靠 order 补救？
order 只改视觉顺序，不改 DOM 流。键盘 Tab、屏幕阅读器、打印样式、querySelector 全部按源码顺序走。
- 必须把
<main>放在 HTML 最前面，再用order: -1/0/1调整左/中/右视觉位置 - 别用
order: 99这类大数字，响应式断点切换时容易冲突，iOS Safari 重排卡顿 -
position: absolute元素完全脱离 flex 流，order对它无效
移动端隐藏侧栏后中间栏变窄？别用 display: none
display: none 会让元素彻底退出 flex 计算，容器只剩一个子项，flex: 0 1 auto 的中间栏反而分不到全宽——它按“剩余两个子项”算比例，结果变窄。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：
visibility: hidden; width: 0; overflow: hidden; flex: 0 0 0;，元素仍参与计算但不可见 - 更推荐方案：媒体查询里改
flex-direction: column，三栏自然堆叠，order失去意义，也不用维护多套逻辑 - 避免同时用
justify-content: space-between和固定侧栏宽，小屏下易触发横向滚动
真正难的不是写出那三行 flex 样式，而是确认父容器宽度来源是否可靠——外层 max-width、祖先用了 transform 或 overflow: hidden，都可能截断主轴计算。这些地方一漏，flex: 0 1 auto 就白写了。
