flex-basis: 0 仅设空间分配起点而非强制裁剪，内容自然尺寸仍会撑开元素；需配合 flex-grow: 1 和 min-width: 0 才能实现从零均分。
flex-basis: 0 为什么没让元素变窄？
因为 flex-basis: 0 只是设定了空间分配的“起点”，不是强制裁剪内容。浏览器仍会按子项内真实内容（文字、图片、子元素）计算其自然尺寸；若内容本身宽于 0，它就会撑开——这不是 bug，而是 flex 布局算法的正常行为。
哪些内容会让 flex-basis: 0 “失效”？
所谓“失效”，其实是内容尺寸覆盖了 flex-basis 的初始设定。常见触发场景包括：
-
white-space: normal下的长单词或无空格字符串（如 URL、base64 片段），会先尝试折行，但若父容器flex-wrap: nowrap，则直接撑宽 - 子项内嵌套了
display: inline-block或float元素，它们脱离文档流后，外部 flex 无法准确感知其内容宽度 - 设置了
min-width: auto（现代浏览器默认值），它会强制把最小宽度设为内容宽度，覆盖flex-basis: 0 - 子项有 padding/border +
box-sizing: content-box，导致内容区变窄，但flex-basis: 0不管这个，只管主轴起始点
怎么确认 flex-basis 真的生效了？
别只看元素视觉宽度，打开 DevTools 的 Layout 面板，查 Flex Basis 这一项：
- 显示
0px或0%→flex-basis已设置成功 - 显示具体数值（如
124px）→ 实际被内容或width覆盖，flex-basis未参与计算 - 显示
auto→ 检查是否漏写了flex-basis，或被其他规则重置
同时注意：如果子项有显式 width，它会优先于 flex-basis 生效（除非 width 是 auto）。
想真正从零开始均分，该怎么做？
光写 flex-basis: 0 不够，必须配合以下任一组合：
-
flex: 1 1 0px（推荐，明确单位，兼容 IE11） flex-grow: 1; flex-shrink: 1; flex-basis: 0px;- 加
min-width: 0—— 这是关键兜底，能压制min-width: auto对内容宽度的默认保护 - 对纯文本子项，加
white-space: nowrap防止意外折行干扰宽度计算
容易被忽略的是：min-width: 0 必须加在 flex 子项上，而不是父容器；它不改变布局意图，只解除浏览器对“最小内容宽”的隐式锁定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
