flex: 1 不等于等宽，因 flex-basis 受内容宽度、width、min-width 影响；需统一设 flex: 1 0 0 并清除尺寸干扰才能实现严格比例分配。
子项比例不均匀，根本不是 flex: 1 写错了，而是 flex-basis 没控住——内容宽度、固定宽、min-width 都在悄悄吃掉“剩余空间”。
为什么 flex: 1 不等于等宽？
浏览器计算 flex-grow 时，先减去所有子项的 flex-basis 总和，再把剩下的空间按比例分。而 flex: 1 默认等价于 flex: 1 1 0，但前提是：子项没设 width、没写 min-width、内容也没撑出超大 min-content 宽度。
- 如果某个子项里有长单词或
white-space: nowrap，它的min-content可能远大于 0，直接卡住伸缩起点 - 子项写了
width: 200px，会覆盖flex-basis，flex: 1就失效了 -
flex-basis: auto（比如没显式设值）会参考内容尺寸，不同内容 → 不同起点 → 分配结果歪了
想严格按比例分，必须清掉 flex-basis 干扰
要让 flex: 1、flex: 2 真正按 1:2 执行，就得切断内容对初始尺寸的影响：
- 统一写
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0），而不是只写flex: 1 - 移除子项上所有
width、min-width、max-width - 对内联长文本加
overflow-wrap: break-word或word-break: break-all，防min-content溢出
示例安全写法：
.item { flex: 1 0 0; overflow-wrap: break-word; }
justify-content 和 align-items 别用反了
很多人调比例时顺手加了 justify-content: center，结果发现“居中”反而让间距变怪——因为 justify-content 只管主轴，而主轴方向由 flex-direction 决定：
-
flex-direction: row（默认）→ 主轴水平 →justify-content控左右间距 -
flex-direction: column→ 主轴垂直 →justify-content控上下间距，此时想水平居中得靠align-items: center - 如果容器高度没设（比如
height: auto），align-items: center在垂直方向可能完全不生效——交叉轴长度为 0，没法居中
调试时重点看这三处 computed 值
打开开发者工具，选中子项，在 “Computed” 面板里盯死：
-
flex-basis是多少？是不是被width或内容顶成了 200px 而不是 0 -
flex-grow是否为 1？如果父容器没设display: flex，这个值直接被忽略 - “Available main size”（主轴可用尺寸）是否为正？如果子项总
flex-basis已 ≥ 容器宽度，就没剩余空间可分
真正卡住比例的，往往不是 flex 属性本身，而是你没意识到那个隐藏的 min-content 或者漏掉的一行 height: 100%。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
