圣杯布局要求主内容区在html中前置，以保障seo、可访问性及语义化；其通过负边距与相对定位实现视觉三栏等高，而非依赖order等仅改变渲染顺序的css属性。
order 只改视觉顺序，不改 DOM 顺序、语义、键盘焦点或屏幕阅读器读取顺序。想用它做圣杯布局，必须接受这个前提——否则会踩可访问性坑。
为什么中间栏必须写在 HTML 最前面
圣杯布局的核心语义是「主内容优先」：SEO 抓取、打印样式、键盘 Tab 跳转、屏幕阅读器朗读，全都按 HTML 源码顺序来。如果把 .left 和 .right 写在 .main 前面，再靠 order: -1 把它们拽到左边，视觉上是对了，但实际焦点跳转会先到左栏、再到右栏、最后才到主内容——用户根本没法快速进入正文。
- 正确结构必须是：
<section class="main"></section>→<aside class="left"></aside>→<aside class="right"></aside> -
.main保持order: 0（默认），.left设order: -1，.right设order: 1 - 别为了“省事”把
order当 DOM 重排用；它不是z-index，也不是tabindex
flex: 1 不等于“自动填满”，它依赖 flex-basis
flex: 1 看似简单，实际等价于 flex: 1 1 0%。当 flex-basis 是 0% 时，三栏会按比例瓜分剩余空间，而主内容区没有最小宽度保障——内容少时直接塌缩成一条线，尤其在 IE11 或 Safari 旧版里更明显。
- 安全写法是：
.main { flex: 0 1 auto; }—— 先按内容宽度展开，再允许收缩（不放大） - 侧栏必须显式控制尺寸：
.left { flex: 0 0 240px; }，不能只写width: 240px，否则在某些 flex 场景下会被忽略 - 父容器要加
min-width: 0到.main，防止单词/URL 过长撑破布局（min-width: 0在 IE11 不生效，得用max-width: 100%; overflow: hidden替代）
移动端隐藏侧栏后中间栏变窄？这不是 bug，是 flex 的正常计算
用 display: none 隐藏 .left 或 .right 后，.main 的 flex: 1 会重新分配「全部容器宽度」，而不是「减去侧栏后的可用宽」——结果反而是中间栏被压缩了。
- 真隐藏侧栏，该用：
.left { visibility: hidden; width: 0; flex: 0 0 0; }，保留占位但不渲染 - 更推荐方案：媒体查询直接切布局模式，比如小屏下
@media (max-width: 768px) { .container { flex-direction: column; } } - 别在滚动中频繁 toggle
order值，会触发重排，iOS Safari 容易卡顿
IE11 下 order 和 flex: 1 失效的硬性补救点
IE11 的 flex 实现有严重偏差，order 和 flex 缩写几乎不可靠，必须手动降级。
- 所有 flex 属性加前缀：
display: -ms-flexbox;、-ms-flex-order: -1;、-ms-flex: 0 1 auto; - 禁用复合写法：
flex: 0 1 auto拆成flex-grow: 0; flex-shrink: 1; flex-basis: auto;并全加-ms-前缀 -
min-width: 0在 IE11 子项上无效，得配合overflow: hidden+max-width: 100%
最常被忽略的是：flex 圣杯布局的「弹性」不在 order，而在整个上下文链——父容器宽度是否稳定、侧栏是否脱离流、flex-basis 是否被隐式覆盖。调一个 order 值解决不了塌陷、错位、换行或可访问性断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
