圣杯布局用flex实现需严格遵循语义html结构：必须置于最前，左右栏后置；中间栏设flex: 0 1 auto确保自适应，侧栏用flex: 0 0 240px固定宽，父容器需min-height: 100vh提供高度参照。
用 display: flex 实现圣杯布局完全可行，而且比浮动/负边距方案更简洁、语义更清晰——但前提是 HTML 结构和关键 CSS 属性必须严格匹配现代规范，否则很容易出现中间栏塌缩、侧栏错位或响应式失效。
HTML 必须把 <main></main> 放在最前面
这是最容易被忽略的语义前提。如果写成 <div class="left"></div>
<main></main><div class="right"></div>，哪怕 CSS 写得再对，搜索引擎和屏幕阅读器仍会认为侧栏优先，SEO 和可访问性直接打折。
- 正确结构：
<main></main><div class="left"></div> <div class="right"></div> -
order只改视觉顺序，不改变 DOM 顺序，所以 HTML 源码顺序必须是语义优先的 - 移动端打印、Tab 键焦点流、无障碍工具都依赖这个原始顺序
flex: 0 1 auto 才能让中间栏真正自适应
很多人给 .main 设 flex: 1，结果它要么塌成一条线，要么撑爆容器。这是因为 flex: 1 等价于 flex: 1 1 0%，浏览器按比例瓜分剩余空间，却无视内容实际宽度。
- 中间栏应设：
flex: 0 1 auto（不放大、可收缩、初始按内容宽展开） - 左右栏必须显式控制尺寸：
flex: 0 0 240px，不能只写width: 240px（在 flex 容器中可能被忽略） - 父容器需有高度参照：
min-height: 100vh或确保html, body { height: 100%; }，否则flex-grow无从生效
别在媒体查询里反复重设 order
小屏下想让 .main 在顶部、.left 在中间、.right 在底部？别用 @media 改 order: -1 / 0 / 1 —— 这会触发重排，iOS Safari 容易卡顿，且焦点顺序依然混乱。
- 正确做法：在断点中改
.container { flex-direction: column; } - 此时三栏自然垂直堆叠，
order失去意义，也不用维护多套顺序逻辑 - 隐藏侧栏时慎用
display: none（会导致.main的flex: 1重新分配全部宽度），更稳妥的是：visibility: hidden; width: 0; flex: 0 0 0;
真正卡住人的从来不是怎么写 CSS，而是 HTML 是否真把 <main></main> 放在最前——视觉对了，语义错了，辅助技术照样判低质。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
