必须用 flex-direction: row，且容器需设 min-height: 100vh；用 column 会导致三栏垂直堆叠，违背圣杯布局“左右固定、中间自适应”本意。
圣杯布局用 flex-direction: row 还是 column？
直接说结论：必须用 flex-direction: row，且容器需设 min-height: 100vh。用 column 会导致三栏垂直堆叠，彻底偏离“左右固定、中间自适应”的圣杯本意。
常见错误是套用移动端习惯，一上来就写 flex-direction: column，结果发现左栏跑到顶部、右栏压在内容下方——这不是圣杯，是叠罗汉。
-
display: flex容器必须设为flex-direction: row，否则order属性对水平排列无效 - 主容器高度不能靠子元素撑开，要显式设
min-height: 100vh或继承父级高度，否则 footer 可能塌陷 - 三栏必须同级子元素，不能把左/右栏嵌套进 header 或 aside 标签里再 flex，否则
order失效
如何用 order 调整 DOM 顺序与视觉顺序分离
order 是圣杯布局绕过 HTML 结构限制的关键。它不改变 DOM 树，只改渲染顺序，所以语义和 SEO 不受影响，但视觉上能实现「中间内容优先加载」的效果。
典型错误是给所有栏都设 order 却漏掉默认值（order: 0），导致浏览器按源码顺序 fallback 渲染，中间栏被挤到最右。
立即学习“前端免费学习笔记（深入）”；
- 中间栏（
main）设order: 1，确保它视觉上居中；左栏order: -1，右栏order: 2 - 不要给左/右栏设
flex: 0 0 200px后还加width，会触发双重宽度计算，尤其在 Safari 下错位 -
order值不必连续，但避免用极大正负数（如order: 999），某些旧版 Chrome 对超大值解析异常
为什么 margin 比 padding 更适合留出左右栏空间
中间栏用 margin-left 和 margin-right 留白，而不是靠父容器 padding，是因为后者无法与 order 协同——padding 是容器属性，不影响子项排列逻辑。
错误做法是给 main 加 padding 模拟边距，结果左栏悬浮时遮盖文字，或者响应式缩放后 padding 固定导致内容溢出。
- 中间栏设
margin: 0 200px（对应左右栏宽），并配合flex: 1自适应剩余空间 - 左右栏必须设
flex: 0 0 200px，不能只写width: 200px，否则在小屏下可能被压缩变形 - 如果左右栏含浮动子元素，记得清浮动（
overflow: hidden或::after），否则高度塌陷影响 margin 计算
IE11 兼容时 order 的坑怎么绕
IE11 支持 flex 但对 order 解析有偏差：它会把 order: -1 当成 0，导致左栏没提前。这时候不能硬扛，得降级处理。
最稳妥的方案不是 polyfill，而是用 float + margin 回退，或用 @supports 切换布局逻辑。
- 用
@supports (order: 1)包裹现代 flex 布局，IE11 自动跳过执行 - 回退方案中，左栏
float: left，右栏float: right，中间栏用margin避开两者 - 避免在 IE11 下混用
flex和display: table，table-cell 在 flex 容器里行为不可控
真正麻烦的不是写法，是测试时容易忽略 IE11 对 min-height 和 flex: 1 的兼容差异——它要求父容器必须有明确高度，否则中间栏高度为 0。
