flex: 1不等分因flex-basis: 0%使元素从零开始均分，但显式width或内容撑开的原始尺寸会干扰；推荐用grid-template-columns: repeat(3, 1fr)实现稳定等分。
flex布局里flex: 1为什么有时不等分？
因为flex: 1是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写，关键在flex-basis——它决定了“基准尺寸”。如果子元素本身有宽度（比如写了width: 200px），或者内容撑开了原始尺寸，flex-basis: 0%会让它们从零开始均分剩余空间，但已有尺寸会干扰计算。
实操建议：
- 确保所有子项没设
width、min-width或内联style影响尺寸 - 显式写
flex: 1 1 0比只写flex: 1更可控（避免某些旧版浏览器解析差异） - 若需保留内容最小宽度，改用
flex: 1 1 auto，但要接受“内容多的项可能略宽”
CSS Grid实现三栏等分最稳的写法
grid-template-columns: repeat(3, 1fr)是当前最直接可靠的方案，1fr代表“剩余空间的等份”，不依赖内容长度，也不吃box-sizing或padding的亏。
常见错误现象：用了1fr 1fr 1fr却出现间隙不均——大概率是父容器display: grid没生效，或子项设置了float/position: absolute脱离了网格流。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 父容器必须声明
display: grid，且无grid-template-areas覆盖列定义 - 避免给子项设
width，Grid会自动忽略；但margin会影响视觉间距，用gap统一控制更安全 - IE11不支持
fr单位，如需兼容，得降级用grid-template-columns: repeat(3, 33.333%)+box-sizing: border-box
用calc()做等分时容易漏掉的边界
有人写width: calc(100% / 3)试图手动等分，这在数学上没错，但CSS计算精度有限，尤其当容器宽度不是3的整数倍时，三个calc()加起来可能少1px或多1px，导致最后一项换行或溢出。
使用场景极少：仅限需要配合固定边距（比如每栏间20px间隙）又不想用gap的老项目。
实操建议：
- 真要用，写成
width: calc((100% - 40px) / 3)（假设两处间隙共40px），并确保父容器padding为0 - 必须搭配
box-sizing: border-box，否则border和padding会额外加宽 - 别在
calc()里混用em和px，字体缩放时易失准
table-cell方案现在还值得考虑吗？
纯display: table-cell能天然等分，且IE8+全支持，但代价是语义错乱、无法响应式断行、vertical-align副作用难控。现代项目基本不该选它。
唯一例外：需要在不支持Flex/Grid的嵌入式环境（如某些邮件客户端或老旧CMS后台）里保底渲染。
实操建议：
- 只当降级方案，用
@supports包裹主逻辑，table-cell写在后面覆盖 - 必须设
table-layout: fixed，否则列宽由内容决定，等分失效 - 子项不能设
margin，用border-spacing或padding模拟间隙
等分这件事本身不难，难的是你得先想清楚：要不要响应式？支不支持旧浏览器？子项内容长度是否可控？选错方案，后面调样式的时间远超写代码的时间。
