flex: 1 能等分是因为它等价于 flex-grow: 1、flex-shrink: 1、flex-basis: 0%，使子项从零开始均分剩余空间；但受 width/min-width、内容宽度、父容器无明确宽度等因素影响而失效。
flex: 1 为什么能等分，但有时又不等？
因为 flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写——关键在 flex-basis: 0%。它让所有子元素“从零开始”瓜分剩余空间，从而实现真正等分。
但如果你给子元素加了 width、min-width 或内容本身过宽（比如长单词、未换行的 URL），就会破坏这个前提：
-
width: 200px会覆盖flex-basis，导致该元素先占 200px，再按比例分剩余空间 - 未设
min-width: 0时，flex 容器默认不会压缩内容（尤其含图片或内联块），造成宽度不均 - 父容器没设
width或被包裹在display: inline元素里，flex 计算失去基准
等分布局的最小可靠写法
要稳定等分，只靠 flex: 1 不够，得配合约束条件：
- 父容器必须有明确宽度（如
width: 100%或max-width），且不是inline类型 - 所有子元素统一写
flex: 1，不要混用width或flex-basis - 为防内容撑开，给子元素加
min-width: 0（尤其含文本、图片、iframe 时） - 文本溢出可加
word-break: break-word或overflow: hidden
示例：
.container {
display: flex;
width: 100%;
}
.container > div {
flex: 1;
min-width: 0;
word-break: break-word;
}
三等分、四等分……有没有更灵活的写法？
不需要手动写多个 flex: 1，可以用 CSS 自定义属性 + flex 配合 calc() 实现动态等分，但注意兼容性：
- 现代方案（Chrome 110+ / Safari 16.4+ / Firefox 110+）：
flex: 0 0 calc(100% / var(--cols))，再通过 JS 或属性设置--cols: 3 - 兼容方案：仍用
flex: 1，它天然支持任意数量子项等分，无需改 CSS - 别用
flex: 0 0 33.33%模拟三等分——小数精度误差 + 边框/间距会让最后一项错位
移动端换行时还想保持等宽？
加 flex-wrap: wrap 后，flex: 1 在换行场景下会失效：每行独立计算，第二行两个子项会各自占 50%，但和第一行三个子项不一致。
解决办法只有两个：
- 放弃等宽，改用
flex: 0 0 calc(100% / 3)+ 媒体查询控制每行数量（推荐） - 用
display: grid替代，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))))更适合响应式等分
Flex 的等分能力本质是「单行空间再分配」，不是「网格化对齐」。这点容易被忽略，但直接影响布局稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
