圣杯布局中main视觉居中靠order属性而非justify-content：设父容器flex后，用order:1/2/3控制左/中/右视觉顺序，main需flex:1 0 0防压缩，禁用float或absolute以免脱离flex流。
圣杯布局里“中部HTML元素居中”这个说法本身容易引发误解——main在 DOM 中必须前置（语义和 SEO 要求），它不是靠“居中对齐”实现视觉居中，而是靠 order + flex 分配空间来“挪到中间位置”。直接用 justify-content: center 或 text-align: center 对整个 main 元素无效，它只是个容器，不是文本。
为什么 justify-content:center 不起作用
justify-content 只控制 flex 容器主轴上的**剩余空间分配**，不改变子元素顺序。如果 main 在 HTML 里写在最前面，又没设 order，它就会被渲染在最左（flex-direction: row 下），justify-content: center 只会让它和左右栏一起“整体居中”，而不是让它“坐在中间”。
- 常见错误现象：
main内容被挤到左侧，左右栏叠在它右边或下方 - 根本原因：没切断 DOM 顺序与视觉顺序的绑定，仅靠对齐属性无法重排
- 兼容性影响：哪怕加了
flex-wrap: wrap，justify-content就彻底失效，三栏堆叠或错行
正确做法：用 order 显式重排视觉顺序
父容器设 display: flex + flex-direction: row 后，靠 order 把视觉顺序调成「左→中→右」，而 DOM 保持「header→main→aside.left→aside.right」不变。
-
main设order: 2（视觉上第二位） -
aside.left设order: 1（视觉上第一位） -
aside.right设order: 3（视觉上第三位） - 三者都需声明宽度或
flex属性，否则order不生效（flex 项必须有尺寸约束）
中间栏宽度必须用 flex: 1 0 0，不能只写 flex: 1
flex: 1 是 flex: 1 1 0 的简写，其中第二个值 flex-shrink: 1 允许压缩——一旦左右栏内容变长或字体缩放，main 可能被压扁甚至换行。而 flex: 1 0 0 锁死基础尺寸为 0，只靠放大填满空间，更稳。
- 错误写法：
main { flex: 1; }→ 在窄屏或大字号下可能收缩变形 - 推荐写法：
main { flex: 1 0 0; }→ 强制自适应且不压缩 - 注意：
flex: 1 0 0和width: 0配合使用更保险，避免某些旧版 Chromium 的计算偏差
别混用 float 或 position: absolute
只要给任意一栏加了 float 或 position: absolute，它就脱离 flex 流，order 失效，flex 分配也作废——你会看到左栏或右栏“飘”出去，盖住 main，或者整行塌陷。
- 典型症状：右侧栏消失、中间内容被遮挡、高度为 0
- 调试技巧：检查 computed styles，看该元素是否还显示
display: flex的 layout 类型 - 真正需要定位时（如悬浮按钮），应放在
main内部，而非作为 flex 子项
最容易被忽略的是：order 值只在 flex 容器内有效，且依赖 flex-direction 方向；写成 order: -1 看似省事，但可读性差，协作时别人得查文档才能确认谁在前谁在后。统一用正整数显式编号，比负值更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
