可行但需主动用@media切单列，因flex-wrap:wrap在row主轴下不触发换行；order可解耦语义与视觉，但须配合flex容器、正确flex值及min-width:0，移动端必须媒体查询强制column布局。
直接用 display: flex + order 实现响应式圣杯布局是可行的，但必须放弃“三栏在小屏下自动堆叠”这种幻想——flex-wrap: wrap 在 flex-direction: row 下根本不会让左右栏换行，只会导致水平滚动或内容挤压。真正可靠的响应式路径，是主动用 @media 切断布局逻辑。
为什么 justify-content: space-between 不能用于圣杯布局
很多人试了 justify-content: space-between，发现左、中、右“看起来”分开了，但一测就崩：因为 justify-content 只分配主轴剩余空间，不改变渲染顺序。而圣杯布局的刚性约束是——<main></main> 必须写在 HTML 最前（语义、SEO、可访问性），视觉上却要居中。DOM 顺序不变，space-between 就只能把 <main></main> 挤到最左，完全违背目标。
必须靠 order 解耦语义与视觉，但它有硬前提：
-
display: flex父容器必须存在，否则order无效 -
flex-direction: row是默认值，别改错成column（否则order行为异常） - 左右栏必须设
flex: 0 0 240px，只写width: 240px不够——小屏下仍会被压缩
中间栏用 flex: 0 1 auto 还是 flex: 1 0 0
推荐 flex: 0 1 auto，但必须加 min-width: 0。原因很实在：flex: 1 等价于 flex: 1 1 0%，第三个参数 0% 会让中间栏从零宽度开始拉伸，内容少时直接塌缩成一条线，尤其侧栏宽、主栏图文混排时更明显。
立即学习“前端免费学习笔记（深入）”；
flex: 0 1 auto 的含义是：不放大、允许收缩、基准宽度按内容自然宽度来。但浏览器默认会给 flex 子项设 min-width: auto，遇到长单词、图片或内联元素就会撑宽整栏，导致溢出。所以必须显式写：
.main {
flex: 0 1 auto;
min-width: 0;
}
别给 .main 加 width 或 max-width，否则会覆盖 flex 分配逻辑。
移动端适配必须用 @media 主动切单列
别指望 flex-wrap: wrap 自动帮你折行。它在 row 主轴下只会在子项总宽 > 容器宽时才折，而左右栏固定宽 + 中间栏自适应，大概率永远不触发。结果就是窄屏上出现横向滚动条，体验极差。
正确做法是在第一个断点（比如 max-width: 768px）里直接切单列：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left,
.right {
width: 100%;
order: 0; /* 清除旧 order 值，避免干扰 */
}
.main {
order: 1;
}
}
注意两点：
- 切换前先重置子项的
flex值：flex: none或显式width: 100%，否则flex: 0 1 auto会继续尝试拉伸高度 - 侧栏在 320px 屏幕上不能直接
display: none——这会让 flex 容器只剩一个子项，.main反而拿不到全宽；该隐藏时用visibility: hidden+height: 0+overflow: hidden更稳妥
order 只改视觉，不改流，这点最容易被忽略
order 是纯视觉重排，不是 DOM 重排。Tab 键焦点、屏幕阅读器朗读、querySelector 查找、打印样式，全部按 HTML 顺序走：先 <main></main>，再左栏，最后右栏。如果你希望键盘用户也按「左-主-右」操作，得额外加 tabindex 或 ARIA 属性控制，不能依赖 order。
还有两个隐形坑：
-
position: absolute元素完全不响应order，因为它已脱离 flex 流 - 动画
order值会频繁触发 layout，滚动中卡顿明显，别用它做动态栏目切换
真正难的不是写出三栏，而是让侧栏在 320px 宽手机上不压成一条线、不消失、不触发横向滚动——这取决于你是否用 minmax() 给它设了合理下限，以及是否在第一个媒体查询里就果断切单列。其他所有技巧，都是在这个前提下才有意义。
