flex: 1只对中间列生效，因其本质是flex-grow: 1，仅在剩余空间中分配；左右列若设flex: 0 0 auto或固定宽，则不参与伸缩，中间列独占剩余宽度。
flex布局中flex: 1为什么只对中间列生效
因为flex: 1本质是flex-grow: 1，它只在剩余空间里分配，而左右两列如果设了flex: 0 0 auto（默认值）或固定width，就不会参与伸缩。中间列加flex: 1后，会吃掉父容器减去左右列之后的所有剩余宽度。
常见错误现象：flex: 1加在左列或右列上，结果整行错位甚至溢出——那是误以为它能“撑满可用区域”，其实它只响应“剩余空间”。
- 左右列用
flex: 0 0 200px（即不放大、不缩小、基础宽200px）更可控 - 中间列必须写
flex: 1，不能只写flex-grow: 1（缺flex-shrink和flex-basis会导致兼容性问题） - 父容器需设
display: flex且无flex-wrap: wrap，否则可能换行破坏两栏结构
grid布局用grid-template-columns怎么写才不踩坑
grid-template-columns: 200px 1fr 200px是最直接的写法，1fr代表“剩余空间均分份”，这里就是中间列独占全部剩余宽度。它比flex更语义清晰，也更容易应对多行或多区域扩展。
使用场景：当左右列内容高度差异大、或未来可能加入侧边栏菜单/广告位时，grid的显式轨道定义更稳定。
- 避免写
1fr 1fr 1fr再靠内容撑开——这会让三列等宽，不符合“固定+自适应”需求 - 不要混用
px和%，比如200px 1fr 25%，百分比在grid中是相对于网格容器宽度计算，易引发不可控缩放 - IE11不支持
fr单位，如需兼容，得降级用display: table或JS计算宽度（但代价高，一般放弃）
float + margin实现时margin-left和margin-right怎么配
这是最老但仍有存在的方案：左右列float: left，中间列用margin-left和margin-right留出左右列宽度。它不依赖现代布局，兼容性极好，但维护成本高。
容易踩的坑：父容器没触发BFC，导致高度塌陷；中间列width没设auto，反而写死width: 100%，结果被margin挤出容器。
- 左右列必须设
width（如width: 200px），且float: left - 中间列不
float，设margin-left: 200px、margin-right: 200px，width: auto（不能省略） - 父容器加
overflow: hidden或display: flow-root来清除浮动、防止塌陷
为什么不用calc(100% - 400px)直接设中间列宽度
它能用，但属于“脆弱的精确控制”：一旦左右列总宽变化（比如响应式下左列变180px、右列变220px），calc()就得同步改，漏改就错位。而且CSS变量支持差，没法动态注入数值。
性能影响小，但可维护性差。适合临时调试或极简静态页，不适合中大型项目。
- 仅当左右列宽度绝对固定（连padding、border都不变）时才考虑
- 必须确保左右列
box-sizing: border-box，否则padding和border会额外增加宽度，让calc失效 - 移动端适配时，
100%含义随viewport变化，但左右列若用rem或vw，calc表达式会迅速失控
真正麻烦的不是写法，而是当设计要求“左列随内容宽度，右列固定，中间自适应”时，flex和grid都得额外处理min-content和max-content逻辑——这时候，多数人其实该 rethink 布局是否真需要“左列不定宽”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
