圣杯布局必须用flex实现且main标签在HTML中必须最先书写；关键在于语义优先，视觉顺序由order控制，flex-direction: row、flex: 1 0 0和aside语义标签缺一不可。
直接用 display: flex 就能实现圣杯布局，不需要浮动、负 margin 或 JavaScript；关键不是“怎么排”，而是“谁先写、谁后显示”——HTML 结构必须语义优先，视觉顺序靠 order 控制。
HTML 结构必须 main 在前，不能为布局调换 DOM 顺序
圣杯布局的硬性要求是：主要内容（main）在 HTML 源码中必须位于最前面。这是为了 SEO、屏幕阅读器和打印样式正确工作。常见错误是把 aside.left 写在 main 前面，以为“这样好控制位置”。结果语义错乱，辅助技术读出来是“先读侧栏再读正文”，用户根本找不到重点。
-
main必须是第一个块级内容容器，哪怕它视觉上要居中 -
header和footer可以放在任意位置（顶部、底部、甚至main后），只要语义合理 - 左右栏用
aside标签，不是div，强化语义
Flex 容器必须设 flex-direction: row 且有明确宽度
三栏横向排列时，父容器（比如 .content）必须是 display: flex + flex-direction: row，否则 order 和 flex 属性不起作用。同时，这个容器得有明确宽度（如 width: 100% 或设为 max-width），否则 flex: 1 无法计算剩余空间。
- 不要只写
display: flex就完事，漏掉flex-direction: row在某些旧浏览器里会默认为column，导致三栏堆成一列 - 含图片或长文本时，给
main加min-width: 0，防止它撑开容器造成横向滚动 - 如果整个页面要填满视口，
min-height: 100vh要加在最外层容器（如body或包裹.content的父元素），而不是.content自身
flex: 1 0 0 是中间栏自适应的核心，不是 flex: 1
flex: 1 等价于 flex: 1 1 0，其中第二个 1 表示可压缩（flex-shrink: 1）。一旦左右栏内容变多，main 可能被压缩到内容溢出。真正可靠的写法是 flex: 1 0 0：允许拉伸（flex-grow: 1），禁止压缩（flex-shrink: 0），基准宽度为 0（flex-basis: 0），这样剩余空间才被真正均分。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1 0 auto会导致中间栏宽度受内容影响，可能窄于预期 -
flex: 1 0 500px会让中间栏最小宽度固定为 500px，失去响应性 - 左右栏用
flex: 0 0 240px，比单纯写width: 240px更安全——它同时锁死伸缩性和基准尺寸
主轴对齐（justify-content）在这里基本没用
很多人试图用 justify-content: center 把中间栏“居中”，但这是误解。圣杯布局的中间栏不是靠居中实现的，而是靠 order + flex-grow 占据剩余空间。一旦用了 justify-content，左右栏会被挤开，反而破坏三栏结构。
-
justify-content只在所有子项总宽度小于容器时才有意义；而圣杯布局中，左右栏固定宽 + 中间栏flex: 1，总宽度恒等于容器宽 - 真要微调间距，用
gap（需父容器为display: grid）或给左右栏加margin，别碰justify-content - 垂直方向对齐（如让三栏等高）靠的是
align-items: stretch（默认值），不用额外设置
最容易被忽略的点是：移动端适配不能只改 flex-direction。当从 row 切到 column 时，order 值必须重置——比如 main 在桌面端 order: 2，在移动端应设为 order: 1，否则它会卡在中间，破坏阅读流。
