flex属性三值依次为flex-grow、flex-shrink、flex-basis，不可调换；按比例分配宽度只需设flex-grow，且flex-basis应为0（非auto）以避免内容宽干扰；margin/border会侵占剩余空间，推荐用gap和box-sizing: border-box保障比例准确。
flex 属性三个值的含义必须分清
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写，顺序固定不可调换。常见误写如 flex: 1 0 200px 被当成“放大 1 倍、不缩小、基准宽 200px”，但实际生效的是 flex-grow: 1（等比拉伸）、flex-shrink: 0（禁止压缩）、flex-basis: 200px（初始宽度）。真正按容器比例分配宽度，关键在 flex-grow，而非 flex-basis。
按比例分配宽度：只设 flex-grow 就够了
想让两个子项占满容器且宽度比为 2:1，不需要手动算像素，也不必设 flex-basis：
.container {
display: flex;
}
.item-a {
flex: 2; /* 等价于 flex: 2 1 0 */
}
.item-b {
flex: 1; /* 等价于 flex: 1 1 0 */
}此时浏览器会忽略元素原始宽度，按 flex-grow 权重分配剩余空间。注意：flex: 2 不代表“占 2/3”，而是“权重为 2”，最终比例由所有 flex-grow 值总和决定（2 + 1 = 3 → 2/3 和 1/3）。
flex-basis 设成 0% 或 0px 会影响计算逻辑
当 flex-basis 为 0% 或 0px 时，元素起始宽度为 0，全部空间都交给 flex-grow 分配，结果最接近“纯比例”。但若设成 auto（默认值），则先按内容宽度或设定宽高占位，再对剩余空间做比例分配——容易导致比例失真。
立即学习“前端免费学习笔记（深入）”；
-
flex: 2 1 auto→ 先按内容宽占位，再分剩余空间 -
flex: 2 1 0或flex: 2→ 起始宽为 0，100% 按权重分 -
flex-basis: 0%在某些旧版 Safari 中兼容性差，推荐用0
别让 margin 或 border 破坏比例计算
flex-grow 只作用于容器主轴上的“剩余空间”，而 margin、border、padding 会占用该空间，导致视觉比例不准。例如：
.item {
flex: 1;
margin: 0 4px; /* 左右各 4px，两元素共占 16px，挤压了 flex 分配空间 */
}解决方法是把间隔提给父容器，用 gap 替代 margin：
.container {
display: flex;
gap: 8px; /* 清晰、不影响 flex 计算 */
}或者用 box-sizing: border-box 确保 padding 和 border 不撑大元素尺寸。
真正要控制比例，盯住 flex-grow 值和 flex-basis 是否为 0 就行；其他样式干扰项，往往比 flex 本身更难排查。
