flex-basis设为0%时三栏不均分，因初始宽度为0且默认flex-grow为0，需统一设flex:1 0 0%；移动端用媒体查询设flex-direction:column并子项flex:none+width:100%；IE11需用0px替代0%、加min-width:0及max-width:100%。
flex-basis 设为 0% 时为什么三栏不均分？
因为 flex-basis 是分配剩余空间前的“基准尺寸”，设成 0% 意味着三栏初始宽度都是 0，后续才靠 flex-grow 等比瓜分——这时若没显式设 flex-grow: 1，浏览器按默认值 0 处理，结果就是只显示内容宽度，不撑满。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 三栏统一写
flex: 1 0 0%（即flex-grow: 1,flex-shrink: 0,flex-basis: 0%），才能真正等宽 - 避免混用
width和flex-basis，否则会触发冲突计算，尤其在 Safari 中容易错乱 - 如果某栏需固定宽度（如 logo），单独设
flex: 0 0 auto或具体像素值，其余栏保持flex: 1 0 0%
移动端怎么让左中右栏变成单列堆叠？
不能只靠 flex-direction: column，否则三栏高度会拉平，破坏语义结构。正确做法是用媒体查询重置 flex 行为，让每栏独占一行且恢复自然流式布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)内给容器加flex-direction: column，同时给每个子项设flex: none（即flex: 0 0 auto） - 去掉所有
flex-basis和flex-grow，避免残留弹性影响高度 - 补一句
width: 100%给子项，防止某些内联元素或图片撑破容器
IE11 下三栏错位或塌陷怎么办？
IE11 的 Flex 实现有严重 bug：对 flex-basis: 0% 解析异常，常把 0% 当成 0px，导致内容溢出；flex: 1 也常被忽略，退化为 block 布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用完整声明代替简写：
flex: 1 0 0px（不是0%），IE11 对px单位兼容性更稳 - 给容器加
min-width: 0，防止 flex item 内容过长时 IE 强制撑宽 - 如果用了
img或video，务必加max-width: 100%和height: auto，否则它们会突破 flex 计算
如何让中间栏优先占据剩余空间，而左右栏固定？
这不是靠 flex-grow 均分，而是用「非对称弹性」：左右栏锁定尺寸，中间栏吃掉所有剩余空间。关键在 flex-basis 和 flex-grow 的配合逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 左栏（logo）：设
flex: 0 0 120px；右栏（操作区）：设flex: 0 0 200px - 中间栏（标题/搜索）：设
flex: 1 1 auto—— 这里flex-basis: auto表示按内容宽度起步，再由flex-grow: 1吃掉剩余空间 - 避免给中间栏设
width，否则会和flex-basis冲突；也不要用flex: 1简写，IE 下可能解析为flex: 1 1 0%，导致收缩异常
最易被忽略的是 flex-shrink 默认为 1，当容器窄于三栏总和时，所有栏都会压缩——哪怕你只想固定左右栏。所以只要涉及固定尺寸栏，flex-shrink: 0 必须显式写出。
