圣杯布局用 flex 实现需满足三前提：html 中 main 必须在最前；中间栏不能写 flex: 1，须用 flex: 0 1 auto 并加 min-width: 0；左右侧栏必须参与 flex 计算且通过 order 调整视觉位置。
用 display: flex 实现圣杯布局完全可行，但必须满足三个硬性前提：HTML 中 <main></main> 必须在最前、中间栏不能写 flex: 1、侧栏必须参与 flex 计算——漏掉任意一条，布局就会视觉错位或语义失效。
HTML 结构顺序不能靠 order 补救
很多人把结构写成 <div class="left"></div>
<main></main><div class="right"></div>，再靠 order: -1 把左栏“拉”到最前。这会让屏幕阅读器、Tab 键焦点、打印样式全部按 DOM 顺序走——先读左栏，再读 main，完全违背“主内容优先”的语义初衷。
正确结构只有一种：<main></main><div class="left"></div>
<div class="right"></div>。之后用 order 调整视觉位置，是补丁；结构本身写对，才是根基。
-
.left { order: 1; }—— 视觉上移到<main></main>左侧 -
.right { order: 3; }—— 视觉上移到<main></main>右侧 - 不给
<main></main>设order，默认为 0，自然居中
flex: 0 1 auto 是中间栏唯一安全写法
写 flex: 1 看似省事，实际等于 flex: 1 1 0%，浏览器会从“零宽度”开始分配空间。一旦左右栏加了 padding 或 border，或者中间内容很少，<main></main> 就会塌成一条线，甚至被压缩到看不见。
flex: 0 1 auto 才是解法：先按内容自然宽度展开（auto），再允许收缩（1），但禁止放大（0）。它尊重内容，也适配容器变化。
- 必须同时加
min-width: 0到<main></main>，否则内部 inline 元素（比如长文本、图片）可能撑破容器 - 别在媒体查询里反复重设
flex值，容易触发重排，iOS Safari 尤其敏感 - 如果父容器有
max-width、transform或overflow: hidden，flex: 0 1 auto会失效——得先查清宽度来源
隐藏侧栏时别用 display: none
小屏下想收起左右栏？直接 display: none 会让 flex 容器只剩一个子项，<main></main> 的 flex: 0 1 auto 失去参照，反而不占满宽度——它还在按“三栏共存”逻辑计算剩余空间。
正确做法是让元素仍参与布局计算，但不可见：
.left, .right { visibility: hidden; width: 0; overflow: hidden; flex: 0 0 0; }- 或者改用
flex-direction: column+order重构流式顺序（比如main { order: 1; }） - 避免同时用
justify-content: space-between和固定侧栏宽，小屏易触发横向滚动
真正难的不是写出那几行 flex 样式，而是确认整个布局链路里没有隐性截断：外层容器是否设置了 overflow: hidden？祖先元素有没有 transform 创建新层叠上下文？这些地方一漏，flex: 0 1 auto 就会静默失效，且极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
