圣杯布局用 flex 实现需三行关键样式：中间栏用 flex: 0 1 auto 和 min-width: 0，侧栏用 flex: 0 0 宽度并设 order；html 中 main 必须在前以保障语义与可访问性；移动端隐藏侧栏应避免 display: none，改用 visibility: hidden + width: 0 等方式保持 flex 计算。
现代项目里，用 display: flex 实现圣杯布局只需三行关键样式，不需要负边距、浮动或 position: absolute——那些方案现在只会在维护时拖慢你。
为什么不能只写 flex: 1 在中间栏？
flex: 1 等价于 flex: 1 1 0%，第三个参数 0% 会让中间栏从“零宽度”开始分配空间，内容少时直接塌缩成一条线，尤其在侧栏宽较大时更明显。
- 正确写法是
flex: 0 1 auto：先按内容自然宽度展开，再允许收缩（但不放大） - 左栏/右栏必须用
flex: 0 0 200px或显式width: 200px+flex-shrink: 0，否则会被压缩 - 容器要加
min-width: 0到中间栏，防止 flex 子项因内部 inline 元素撑宽而溢出
order 只改视觉顺序，不改 DOM 流
HTML 中必须把 <main></main> 放最前——这是语义、SEO 和屏幕阅读器的依据。用 order 调整视觉位置只是“看起来对”，但 Tab 键焦点、打印样式、JS 的 querySelector 都按原始 DOM 顺序走。
.main { order: 2; flex: 0 1 auto; }.left { order: 1; flex: 0 0 240px; }.right { order: 3; flex: 0 0 320px; }- 别给
.main加tabindex试图“修复”焦点顺序，那会破坏可访问性逻辑
移动端适配时，隐藏侧栏后中间栏不占满？
直接 display: none 左右栏会导致 flex 容器重新计算子项数量，flex: 0 1 auto 的中间栏反而分不到全宽——它按“剩余两个子项”算比例，结果变窄。
- 正确做法是用
visibility: hidden+width: 0+overflow: hidden，让元素仍参与 flex 计算但不可见 - 或者用媒体查询重设
flex-direction: column，并调整order值（比如.main { order: 1; }） - 避免在 flex 容器上同时用
justify-content: space-between和固定侧栏宽，这在小屏下容易触发横向滚动
真正难的不是写对这几行 CSS，而是确认父容器宽度来源是否可靠——比如外层有 max-width、祖先用了 transform 或 overflow: hidden，都可能截断 flex 主轴计算。这些地方一漏，flex: 0 1 auto 就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
