直接用 display: flex 实现圣杯布局，需在 html 中置顶以保障语义与可访问性，中间栏用 flex: 0 1 auto + min-width: 0，侧栏用 flex: 0 0 宽度并设 order 微调视觉顺序。
直接用 display: flex 就能实现圣杯布局，不需要负 margin、浮动或 absolute 定位——那些是 2010 年代的补丁方案，现在只会增加维护成本。
HTML 结构必须把 <main></main> 放最前
这是语义、SEO 和屏幕阅读器识别的基础，不是可选项。DOM 顺序决定 Tab 键焦点、打印样式、querySelector 查找结果，order 只改视觉位置，不改这些。
正确结构示例：
<div class="container"> <main class="main">主体内容</main><aside class="left">左栏</aside><aside class="right">右栏</aside> </div>
- 不要把
<main></main>放在中间或最后，否则可访问性逻辑就断了 - 别给
<main></main>加tabindex试图“修复”焦点顺序——那会破坏默认流 - 如果用 JS 动态插入侧栏，也要确保插入后 DOM 顺序仍是 main → left → right
flex: 0 1 auto 是中间栏的关键写法
flex: 1 看似简洁，但等价于 flex: 1 1 0%，第三个参数 0% 会让中间栏从零宽度开始拉伸，内容少时直接塌缩成一条线，尤其在侧栏较宽时更明显。
正确写法是：
.main {
flex: 0 1 auto;
min-width: 0; /* 防止内部 inline 元素撑宽导致溢出 */
}
-
flex: 0 1 auto：不放大、允许收缩、基准宽度按内容自然宽度来 - 必须加
min-width: 0，否则遇到长单词、图片或 flex 子项内嵌 inline 元素时，flex: 0 1 auto会失效 - 不要给
.main设width或max-width，否则会覆盖 flex 分配逻辑
侧栏必须用 flex: 0 0 <width></width> 或显式 width + flex-shrink: 0
只写 width: 240px 不够可靠——当容器空间紧张时，flex 默认允许子项收缩（flex-shrink: 1），侧栏会被压窄。
推荐写法：
.left {
order: -1;
flex: 0 0 240px;
}
.right {
order: 1;
flex: 0 0 320px;
}
-
flex: 0 0 240px明确禁用放大和收缩，基准宽度固定 -
order: -1 / 1是安全值，避免用99或-999，否则响应式断点切换时容易冲突 - 如果项目需兼容老版本 Safari（width: 240px; flex-shrink: 0;
移动端隐藏侧栏不能用 display: none
直接 display: none 左右栏，会导致 flex 容器重新计算子项数量，原本三栏变一栏，flex: 0 1 auto 的 .main 反而分不到全宽——它按“剩余两个子项”算比例，结果变窄。
正确做法是让元素仍参与 flex 计算但不可见：
@media (max-width: 768px) {
.left, .right {
visibility: hidden;
width: 0;
overflow: hidden;
flex: none;
}
.main {
flex: 1; /* 此时可放心设为 1，因只剩一个有效子项 */
}
}
- 不用
opacity: 0或transform: translateX(-100%)，它们不释放空间，仍占 flex 布局位置 - 如果要彻底移除侧栏并让
.main占满，建议用 JS 切换 class 控制是否渲染 DOM，而不是纯 CSS 隐藏 - 真正难的不是这几句 CSS，而是确认父容器宽度来源是否可靠——比如外层有
max-width、祖先用了transform或overflow: hidden，都可能截断 flex 主轴计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
