推荐用 display: grid 实现圣杯布局；若必须用 flexbox，需避免 dom 顺序错乱、flex: 1 塌缩（应改用 flex: 0 1 auto + min-width: 0）、侧栏隐藏后中间栏不占满（应用 visibility: hidden + width: 0 + overflow: hidden 或 @media 切 column）。
直接用 display: flex 实现“圣杯布局”在现代项目里不推荐——它本质是为绕开 IE6/7 的 float 缺陷而设计的 hack，语义混乱、维护成本高，且和响应式天然冲突。真要快速适配 PC 和移动端，display: grid 是更干净、可控的选择；但如果必须用 Flexbox，得避开三个典型坑：DOM 顺序错乱、flex: 1 塌缩、侧栏隐藏后中间栏不占满。
为什么 flex: 1 在中间栏会塌缩？
很多人给中间栏写 flex: 1，结果内容少时它直接缩成一条线，尤其左右栏较宽时更明显。因为 flex: 1 等价于 flex: 1 1 0%，第三个参数 0% 表示从“零宽度”开始分配空间，完全忽略内容自然宽度。
- 正确写法是
flex: 0 1 auto：先按内容宽度展开，再允许收缩（但不放大） - 必须加
min-width: 0到中间栏，防止内部 inline 元素（如长文本、图片）撑宽导致溢出 - 左右栏不能只写
width: 240px，得用flex: 0 0 240px或显式flex-shrink: 0，否则小屏下仍可能被压缩
移动端隐藏侧栏后中间栏为啥不占满？
直接对左右栏用 display: none，会导致 flex 容器重新计算子项数量，flex: 0 1 auto 的中间栏按“剩余两个子项”算比例，结果变窄，而非全宽。
- 正确做法是组合使用：
visibility: hidden+width: 0+overflow: hidden，让元素仍参与 flex 计算但不可见 - 或改用
@media主动切单列：flex-direction: column，并重设order（比如.main { order: 1; }） - 别指望
flex-wrap: wrap自动折行——在row主轴下，只要容器够宽，它就坚决不换行，窄屏极易触发横向滚动
order 能调视觉顺序，但 DOM 顺序不能动
order 是唯一能解耦语义与视觉的属性，但它有硬前提：容器必须是 flex-direction: row，且 main 必须在 HTML 中前置——这是 SEO、屏幕阅读器和 Tab 键焦点顺序的依据。
-
.main { order: 2; }、.left { order: 1; }、.right { order: 3; } - 千万别给
.main加tabindex试图“修复”焦点顺序，那会破坏可访问性逻辑 - 所有祖先元素若用了
transform、overflow: hidden或max-width，都可能截断 flex 主轴计算，导致flex: 0 1 auto失效
真正容易被忽略的是：移动端适配不是“隐藏侧栏就完事”，而是必须主动用 @media 切换布局流；而 PC 端的“三栏等高”需求，Flexbox 默认就满足，无需额外 hack —— 但前提是，你没在中间栏里塞一个没设 min-width: 0 的 img 或长单词。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
