要实现精确比例分配，flex-basis 必须设为 0（或 0px），再用 flex-grow 定义权重；设成 auto 或具体像素值会导致比例失真，因为 flex-grow 分配的是剩余空间而非容器总宽，只有 flex-basis 统一为 0 才能确保起点一致、比例严格按 flex-grow 数值比分配。
直接说结论：要实现精确比例分配，flex-basis 必须设为 0（或 0px），再用 flex-grow 定义权重；设成 auto 或具体像素值会导致比例失真。
为什么 flex-basis 设为 0 才能按比例分配
flex-grow 分配的是「剩余空间」，不是整个容器宽度。如果 flex-basis 是 auto（默认）或 100px 这类固定值，每个子项先占掉自己那块基础尺寸，剩下的才按 flex-grow 瓜分——这会让小内容项“白占便宜”，大内容项被压缩，比例完全跑偏。
例如容器宽 600px，三个子项分别设 flex: 1 1 auto、flex: 2 1 auto、flex: 3 1 auto，实际结果几乎不可能是 1:2:3，因为文字宽度不同、内边距不同，初始占用已不均等。
设 flex-basis: 0 后，所有子项起点归零，flex-grow 才真正决定它们各拿多少份剩余空间。
flex: 1 1 0 和 flex: 1 0 0 的区别在哪
两者都把 flex-basis 设为 0，但 flex-shrink 值不同（中间那位）：前者可收缩，后者不可收缩。这个差异在空间不足时才暴露。
-
flex: 1 1 0→flex-grow: 1,flex-shrink: 1,flex-basis: 0：空间不够时会按比例压缩 -
flex: 1 0 0→flex-grow: 1,flex-shrink: 0,flex-basis: 0：空间不够也不缩，可能溢出或换行
做等分布局（如三栏导航）通常用 flex: 1 1 0；做固定比例且不允许压缩的卡片组，选 flex: 1 0 0 更稳妥。
常见错误：用百分比 flex-basis 混淆比例逻辑
有人试图写 flex-basis: 20% + flex-grow: 1 来“强化”占比，这是无效的。因为 flex-basis 是初始尺寸，不是权重；百分比值受父容器影响，而 flex-grow 又在它之后二次分配——两套逻辑打架，结果难预测。
更糟的是，当父容器宽度变化时，flex-basis: 20% 本身就在变，flex-grow 的“剩余空间”也跟着变，比例根本稳不住。
正确做法只保留一套控制点：flex-basis: 0 + flex-grow 数值比，比如三栏 1:2:3 就写：
item-1 { flex: 1 1 0; }
item-2 { flex: 2 1 0; }
item-3 { flex: 3 1 0; }
最终宽度严格等于容器总宽 × 对应权重 / 总权重（即 1/6、2/6、3/6）。
内容最小宽度被压垮怎么办
设 flex-basis: 0 后，如果子项里有长单词、图片或固定宽元素，flex-grow 可能把它撑开，也可能因 min-width 缺失而过度压缩（尤其文本被挤成一列）。
解决方法不是改 flex-basis，而是加保护层：
- 给文本容器加
min-width: 0（防止内部内容强制撑宽） - 给需要保底的子项设
min-width，比如min-width: 120px - 对图片或媒体元素加
max-width: 100%+height: auto
记住：flex-basis 是起点，min-width 是底线，两者不冲突，但作用阶段不同——一个管初始分配，一个管最终渲染下限。
最易被忽略的点：flex-grow 的比例计算只看数值比，和单位无关；但 flex-basis 一旦带单位（哪怕只是 0px 而非 0），某些旧版 Safari 会解析异常。统一用 0 最安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
