不能只用justify-content实现圣杯布局，因其仅分配主轴剩余空间且不改变DOM渲染顺序；必须配合order（需父容器display:flex且flex-direction:row）、左右栏flex:0 0固定宽、中间栏flex:1 0 0才能满足语义前置与视觉居中的刚性要求。
为什么不能只用 justify-content 实现圣杯布局
因为 justify-content: space-between 只分配主轴剩余空间，不改变 DOM 渲染顺序。而圣杯布局的刚性要求是：<main> 必须写在 HTML 最前面（利于 SEO 和可访问性），但视觉上要居中——justify-content 会把它死死压在最左，根本动不了。
order 是唯一解耦语义与视觉的属性，但它有硬前提
必须同时满足以下三点，order 才生效：
- 父容器设
display: flex且flex-direction: row（横向主轴） -
<main>设order: 2，左侧栏order: 1，右侧栏order: 3 - 左右栏不能只写
width: 240px，得用flex: 0 0 240px，否则小屏下会被压缩
中间栏推荐 flex: 1 0 0：保证撑满、禁止缩小、不因内容宽度干扰伸缩基准。
移动端堆叠时最容易忽略的两个细节
很多人直接加 @media 改 flex-direction: column，结果出问题：
立即学习“前端免费学习笔记（深入）”；
-
<main>在纵向流里仍是块级流，长文本会把整列撑宽；必须额外加width: 100%和box-sizing: border-box - 千万别在滚动或交互中动态改
order值——触发重排（layout），卡顿明显，且键盘焦点顺序完全没变
Flex vs Grid：什么情况下该换用 grid
当出现这些信号，说明 Flex 已经吃力：
- 需要某栏横跨三列（比如 banner），
grid-column: 1 / -1一行搞定，Flex 得抽出来单独处理 - 想让中栏在小屏时移到顶部，Grid 可用
grid-row直接重排，Flex 的order只能改视觉顺序，语义结构不变 - 三栏高度需严格一致，Flex 得靠
align-items: stretch+ 各种 hack，Grid 天然支持align-content
真正容易被忽略的是：很多项目写了桌面端 Flex 圣杯，却忘了加 @media 或用了过时的断点值（比如还按 max-width: 768px 切，实际现在手机屏宽普遍 ≥ 812px）。
