不能只靠justify-content实现圣杯布局，因其仅分配主轴剩余空间且不改变渲染顺序；必须用order解耦语义与视觉，配合flex-direction:row、左右栏flex:0 0固定宽、中间栏flex:0 1 auto。
为什么不能只靠 justify-content 实现圣杯布局
很多人加了 justify-content: space-between 就以为三栏分开了，结果一测发现：<main></main> 写在 HTML 最前，却死活被挤到最左——因为 justify-content 只分配主轴剩余空间，不改渲染顺序，也不管语义优先。SEO 和屏幕阅读器依赖的 DOM 顺序必须保持 <main></main> 在前，视觉居中只能靠 order 解耦。
order + flex-direction: row 是唯一可靠解法
要让 <main></main> 视觉居中但 DOM 靠前，必须同时满足三个条件：
-
flex-direction必须是row（column 下order不影响水平排列） -
<main></main>设order: 2，左栏order: 1，右栏order: 3 - 左右栏用
flex: 0 0 240px（不是仅width: 240px），否则小屏下会被压缩 -
<main></main>推荐flex: 0 1 auto：按内容宽度起始，允许收缩但不放大；别用flex: 1，它等价于flex: 1 1 0%，内容少时直接塌成一条线
移动端适配最容易踩的两个坑
窄屏上出现横向滚动条？大概率是因为没主动切单列。Flexbox 的 flex-wrap: wrap 在 row 主轴下只在子项总宽 > 容器宽时才折行，而左右栏固定宽 + 中间栏自适应，几乎永远不触发。
- 必须用
@media主动切单列，比如@media (max-width: 768px) { .container { flex-direction: column; } .main { order: 1; } } - 隐藏侧栏别用
display: none：它会让 flex 容器重算子项数量，flex: 0 1 auto的中间栏反而分不到全宽；改用visibility: hidden+width: 0+overflow: hidden - 页脚在
column模式下容易被顶下去，得给页脚容器加margin-top: auto或单独包一层flex: 0 0 auto
现代项目里该不该继续用“圣杯布局”这个词
这个词本质是 IE6/7 时代绕过 float 缺陷的 hack，语义混乱、维护成本高，和响应式天然冲突。真要做左中右三栏并适配手机，display: grid 更直接：grid-template-columns: minmax(240px, 25%) 1fr minmax(320px, 30%) 一行定义，不依赖 DOM 顺序，gap 控间距，minmax() 自动约束侧栏宽高比。Flexbox 做圣杯，现在只适合兼容老项目或教学演示。
立即学习“前端免费学习笔记（深入）”；
