现代三栏圣杯布局应优先用flex而非float，通过order属性配合媒体查询实现中栏优先渲染与响应式重排，侧栏用flex: 0 0 宽度值，禁用width以防冲突。
圣杯布局用 flex 实现比 float 更可靠
纯 CSS 三栏圣杯（左/中/右，中栏优先渲染、自适应，侧栏固定宽）在现代项目里不该再用 float + 负 margin 那套了。flex 布局天然支持源顺序与视觉顺序分离，order 属性就是重排的关键，而且兼容性已覆盖所有主流移动端浏览器（Chrome Android ≥ 4.4，iOS Safari ≥ 9）。
常见错误是把 header、main、aside 按 DOM 顺序写死，又在 CSS 里强行用 float 或 position: absolute 拉位置，结果移动端一缩就错乱，或屏幕阅读器读序混乱。
实操建议：
- HTML 结构按语义和内容优先级写：先
main，再aside（右栏），最后nav（左栏）——这样默认流下中栏最先加载，SEO 和无障碍都受益 - 给容器设
display: flex和flex-wrap: wrap，为后续响应式留余地 - 三栏统一设
flex-shrink: 0，避免小屏下被压缩变形
移动端用 order 重排必须配合 @media 断点
不加媒体查询直接写 order 是无效的——它只改变 flex 子项的视觉顺序，但不会自动适配尺寸。你得明确告诉浏览器：“当宽度 ≤ 768px 时，才把左栏提到最前”。否则桌面端也会被重排，破坏原始布局。
典型错误是只写 nav { order: -1; }，没包裹在 @media 里，导致桌面端左栏跑到中间内容上面去。
实操建议：
- 桌面端保持默认
order: 0（即不写order），中栏main在 DOM 和视觉上都居中 - 移动端断点用
@media (max-width: 768px)，里面给nav设order: -1，main保持order: 0，aside设order: 1 - 注意：
order值只是相对排序，-1 / 0 / 1 和 1 / 2 / 3 效果一样，别纠结“必须从 0 开始”
flex-basis 和 width 混用容易导致响应失效
很多人给侧栏写 width: 200px，中栏写 flex: 1，看似没问题，但一旦进到移动端，width 会压制 flex-basis，导致 flex 不生效，三栏堆成一列还溢出屏幕。
根本原因是 width 是 layout 层级属性，而 flex 是 flexbox 布局层级属性，二者冲突时 width 优先级更高。
实操建议：
- 侧栏统一用
flex: 0 0 200px（即flex-grow: 0、flex-shrink: 0、flex-basis: 200px），禁用 width - 中栏用
flex: 1，等价于flex: 1 1 0，确保它能撑满剩余空间 - 移动端断点里，把侧栏的
flex改成flex: 0 0 100%，让它独占一行，而不是靠width: 100%
IE11 对 order 的支持有隐藏陷阱
虽然 IE11 支持 order，但它不支持 flex-wrap: wrap 下的跨行重排，也不识别 flex: 1 的简写（得写全 flex: 1 1 auto）。更麻烦的是，它对负 order 值（比如 order: -1）渲染不稳定，有时会跳回默认顺序。
如果你的项目还要兼容 IE11，别指望靠一套 flex 规则通吃。
实操建议：
- 用
@supports (order: -1)包裹现代 flex 规则，IE11 会跳过执行 - 为 IE11 单独写降级方案：用
display: table+table-cell模拟三栏，或直接用 JS 动态插入style覆盖order - 移动端基本不用考虑 IE11，但如果你的“移动端”包含微信内置浏览器旧版本（X5 内核 ≤ 3.0），也要留意其 flex 实现不完整
order 不是魔法，它只改视觉顺序，不改 DOM 顺序、不改焦点流、不改屏幕阅读器读取顺序——真要兼顾可访问性，得配合 aria-flowto 或调整实际 HTML 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
