flex圣杯布局不能只靠flex: 1，因其等价于flex: 1 1 0%，导致中间栏被侧边栏挤压塌缩；须用flex: 0 1 auto确保主内容按自身宽度优先展开，侧边栏用flex: 0 0 固定值，并严格遵循dom视觉顺序以保障可访问性与响应式行为。
flex圣杯布局为什么不能只靠flex: 1
因为flex: 1等价于flex: 1 1 0%，第三个参数flex-basis为0%时，三栏会按比例瓜分剩余空间，但中间主内容区无法优先撑开——它会被两侧固定宽的侧边栏“挤扁”，尤其在内容少时直接塌缩成一条线。
真实场景中，你希望：左侧导航定宽（如240px），右侧工具栏定宽（如320px），中间自动填满且**最小宽度不小于内容本身**。这时候必须显式控制flex-basis。
- 用
flex: 0 1 auto让中间栏先按内容宽度展开，再弹性收缩（不放大） - 两侧用
flex: 0 0 240px这类明确flex-basis的写法，避免受父容器flex-direction影响错乱 - 别忘了给容器加
display: flex和min-height: 100vh，否则高度塌陷导致滚动异常
HTML结构顺序影响flex流，必须按视觉顺序写DOM
Flex布局中order能调序，但圣杯布局依赖源顺序保证语义和可访问性——屏幕阅读器、SEO、打印样式都按DOM顺序解析。把main放中间，左右aside放两边，是最稳妥的写法。
常见错误是把main写最后，再用order: -1拉到中间，结果打印时内容错位，或键盘焦点跳转顺序混乱。
- 正确结构：
<header></header>→<aside class="left"></aside>→<main></main>→<aside class="right"></aside>→<footer></footer> - 所有
aside和main需设flex-shrink: 0防止小屏下被压缩到看不见 - 如果非要DOM顺序不同（比如SEO要求
main前置），就别用flex圣杯，改用grid更可控
flex-basis设auto还是具体值？看是否要响应式断点
flex-basis设auto表示“按内容宽度”，设px/%则是固定基准。圣杯布局里，中间栏必须用auto，否则无法自适应内容；但侧边栏用px更稳——百分比在嵌套flex容器里容易计算失真。
不过移动端需要收起侧边栏时，flex-basis就得配合媒体查询切换：
- 桌面端：
.left { flex: 0 0 240px; } - 平板端：
@media (max-width: 768px) { .left { flex-basis: 0; flex-grow: 1; } }—— 这样侧边栏才真正“隐藏”而非留白 - 别用
display: none切侧边栏，会破坏flex流，导致main突然占满全宽并重排，有视觉闪动
IE11兼容flex圣杯？基本不可行，别硬扛
IE11对flex-wrap、flex-basis支持极差，尤其是flex-basis: auto常被当成0px处理，中间栏直接消失。社区那些“IE11 hack”方案（比如嵌套display: table）实际项目里维护成本极高，且和现代CSS冲突。
- 如果必须支持IE11，直接放弃flex圣杯，用
float+margin老方案，或上grid配@supports降级 - 检查
flex-flow写法：IE11不认row wrap简写，得拆成flex-direction: row+flex-wrap: wrap - 最现实的做法：用
feature detection检测flex-basis支持，不支持则加载备用布局JS逻辑
复杂点从来不在代码行数，而在不同设备、不同输入方式、不同辅助技术之间如何保持行为一致。flex圣杯看着简单，但flex-basis的隐式计算、shrink触发条件、以及和min-width的交互，随便一个没压住就会在某个机型上露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
