圣杯布局左栏右栏换行是因为未显式设置flex-wrap: nowrap；三栏需同行为前提，左/右栏用flex: 0 0 auto或固定宽，中间栏用flex: 1自适应，且html中中间栏须前置并用order调整视觉顺序。
flex实现圣杯布局时，为什么左栏和右栏会换行？
因为没设 flex-wrap: nowrap，而容器默认允许换行。圣杯布局要求三栏必须在同一行，哪怕内容溢出也要强制保持横向排列。
- 父容器必须设
display: flex且显式声明flex-wrap: nowrap（虽然 nowrap 是默认值，但某些旧版 Safari 会忽略隐式行为） - 左栏和右栏需用
flex: 0 0 auto或固定宽度（如width: 200px），否则它们会随内容撑开并挤压中间栏 - 中间栏不能写死宽度，得靠
flex: 1自适应剩余空间——这是它能“填满左右间隙”的核心
如何让中间栏优先渲染、左栏右栏不遮挡它？
DOM顺序决定渲染层叠和语义权重。圣杯布局的语义逻辑是“主内容优先”，所以HTML里必须把中间栏写在最前面，再用 order 调整视觉位置。
- 左栏加
order: -1，右栏加order: 1，中间栏保持order: 0（默认） - 千万别用
position: absolute或float混合 flex，会导致order失效或触发怪异的重排 - 若用
grid替代，order不起作用——这是 flex 特有的布局控制手段
移动端适配时，左栏右栏隐藏后中间栏不占满怎么办？
常见错误是只改 display: none，这会让 flex 容器重新计算剩余子项数量，导致中间栏的 flex: 1 分到的是“全宽”，而非“去除左右后的可用宽”——实际效果反而是中间栏变窄了。
- 应该用
visibility: hidden+width: 0+flex: 0 0 0组合隐藏侧栏，保留其 flex 占位 - 或者更干净的做法：用媒体查询切换整个布局模式，比如小屏下改为
flex-direction: column，三栏垂直堆叠 - 注意
min-width设置——如果中间栏内容极少，flex: 1可能被压缩到 0，需加min-width: 0防止溢出破坏布局
IE11下flex圣杯布局错乱，哪些属性必须降级处理？
IE11 的 flex 实现有严重偏差，尤其对 flex: 1 和 order 的解析不稳定，必须手动补全前缀并限制用法。
- 所有 flex 相关属性都要加
-ms-前缀：display: -ms-flexbox、-ms-flex: 1、-ms-flex-order: -1 - 避免使用
flex: 1 1 auto这类复合写法，IE11 解析不准，拆成flex-grow: 1、flex-shrink: 1、flex-basis: auto并加前缀 - IE11 不支持
min-width: 0在 flex 子项上的表现，得用max-width: 100%+overflow: hidden替代防溢出
flex: 1 看似简单，但它依赖整个 flex 上下文的宽度计算链——父容器宽度、侧栏是否脱离文档流、是否有 margin/padding 影响主轴尺寸，任何一环断掉，它就失效。真要稳定，就得把每个环节的宽度来源都盯住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
