不能只靠justify-content实现圣杯布局，因其仅分配主轴剩余空间且不改变渲染顺序；必须用order配合flex-direction:row重排视觉顺序，同时main语义前置、左右栏设flex:0 0固定宽、中间栏用flex:1 0 0确保自适应。
为什么不能只靠 justify-content 实现圣杯布局
很多人试了 justify-content: space-between，发现左、中、右三栏“看起来”分开了，但实际一测就崩：HTML 中 <main></main> 必须语义前置（SEO 和屏幕阅读器要求），而 space-between 严格按 DOM 顺序排布——<main></main> 写在最前，就一定被挤到最左，根本无法视觉居中。justify-content 只分配主轴剩余空间，不改变渲染顺序，也不响应语义优先需求。
order 是唯一能解耦语义与视觉的属性
圣杯布局的核心刚性约束是：DOM 里 <main></main> 在前，视觉上却必须居中。只有 order 能做到这点，但它有硬前提：
- 父容器必须设
display: flex且flex-direction: row（横向主轴），否则order不生效 -
<main></main>设order: 2，左侧栏order: 1，右侧栏order: 3 - 左右栏必须用
flex: 0 0 240px（而非仅width: 240px），否则小屏下仍可能被压缩 -
<main></main>推荐用flex: 1 0 0：保证撑满、不缩小、不因内容宽度干扰伸缩基准
移动端适配时最容易忽略的两个坑
把 flex-direction 改成 column 让三栏堆叠，看似简单，实则埋雷：
- 页脚会被内容顶下去——必须给页脚容器加
margin-top: auto或单独包裹进flex: 0 0 auto的盒子 - 侧栏（
<aside></aside>）在纵向流里仍保持块级流，长文本会撑宽整列；应在@media中给它加width: 100%和box-sizing: border-box - 别在滚动中动态改
order值——触发 layout，卡顿明显，键盘焦点顺序也完全没变
兼容性底线：IE10/11 已无必要强撑
IE10 需要 -ms-order，但它不支持 flex: 1，实际写法极其受限；IE11 虽支持部分 Flex，但 flex-wrap 行为异常，且微软已终止支持。2026 年主流浏览器（Chrome/Firefox/Safari/Edge）全量支持标准 Flex，真正要纠结的不是怎么降级，而是 HTML 结构是否真按内容优先组织——视觉对了，语义错了，照样被搜索引擎和辅助技术判为低质量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
