圣杯布局的核心是HTML中main前置、CSS用flex+order+flex缩写实现语义与视觉统一：两栏布局侧边栏flex: 0 0 240px、主内容flex: 1；三栏布局main order: 0 flex: 0 1 auto，左右栏分别order: -1/1且flex: 0 0 240px，小屏改flex-direction: column即可。
用 Flex 实现两栏自适应和三栏圣杯布局，核心是结构语义正确 + 属性精准控制，不是堆砌技巧。2026 年标准做法已淘汰负边距、浮动、绝对定位等旧方案，直接靠 display: flex、order、flex 缩写就能干净实现，同时保障可访问性和响应式稳定性。
两栏布局：左侧固定 + 右侧自适应
HTML 结构保持自然顺序，语义清晰：
<div class="container"> <aside class="sidebar">导航</aside> <main class="content">正文</main> </div>
CSS 关键点：
-
容器设
display: flex，高度需有参照（如min-height: 100vh或父级设height: 100%） -
侧边栏固定宽度：用
flex: 0 0 240px（不放大、不缩小、基准宽 240px），比width: 240px更可靠 -
主内容区自适应：用
flex: 1（等价于flex: 1 1 0%），它会自动占满剩余空间
三栏圣杯布局：左右固定 + 中间自适应（语义优先）
HTML 必须把 <main> 放在最前，这是圣杯布局的语义基础，也是搜索引擎与屏幕阅读器识别的关键：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <main class="main">主体内容</main> <aside class="left">左栏</aside> <aside class="right">右栏</aside> </div>
CSS 控制视觉顺序与尺寸：
.container { display: flex; min-height: 100vh; }-
.main { order: 0; flex: 0 1 auto; }—— 先按内容宽度展开，再允许收缩，不强制放大 -
.left { order: -1; flex: 0 0 240px; }—— 视觉上排最左 -
.right { order: 1; flex: 0 0 240px; }—— 视觉上排最右
注意：order 只改视觉流，不改 DOM 顺序。Tab 键、读屏器仍按 HTML 源码走，所以结构必须是 <main> 在前。
移动端适配：用 flex-direction: column 替代重置 order
小屏下不需要反复切换 order: -1/0/1，那样易触发重排、iOS Safari 卡顿，且焦点顺序混乱：
- 在
@media (max-width: 768px)中，只改容器方向：.container { flex-direction: column; } - 此时三栏自然垂直堆叠，
order失效，无需额外维护 - 如需隐藏侧栏，避免用
display: none（会让.main的flex: 1重新计算宽度），改用：visibility: hidden; width: 0; flex: 0 0 0;
常见错误与避坑点
这些细节看似小，但直接影响布局是否稳定：
-
中间栏塌缩成一条线：错在给
.main设了flex: 1却没设高度参照，或误用flex: 1而非flex: 0 1 auto -
侧栏尺寸失效：写了
width: 240px却没配flex: 0 0 240px，在 flex 容器中width可能被忽略 -
父容器没高度：
flex-grow需要明确的高度上下文，min-height: 100vh是最稳妥的起点 -
用大数字设
order：如order: 99，响应式断点切换时容易冲突，坚持用-1 / 0 / 1
