flex-basis 是初始主轴尺寸而非固定宽度，受 flex-grow/shrink 影响；推荐用 flex: 1（即 flex-basis: 0 + flex-grow: 1）实现均分自适应布局。
flex-basis 不是固定宽度，它只是“初始主轴尺寸”的起点
很多人把 flex-basis 当成 width 用，结果发现元素在容器缩小时没按预期收缩，甚至溢出。这是因为 flex-basis 只参与 flex 项目的初始尺寸计算，后续仍受 flex-grow 和 flex-shrink 控制。默认值是 auto（取内容宽度或 width），设为 0 时会忽略内容尺寸，让 flex-grow 完全接管分配逻辑。
-
flex-basis: 200px：项目初始占 200px，但若容器空间不足且flex-shrink: 1（默认），它仍会被压缩 -
flex-basis: 0+flex-grow: 1：彻底放弃内容宽度，均分剩余空间（最常用自适应多列写法） -
flex-basis: auto+width: 150px：以width为基准，再按 flex 规则伸缩
多列等宽自适应的推荐写法：flex-basis: 0 + flex-grow
要实现三列卡片在不同屏幕下始终均分容器宽度，别写 flex-basis: 33.333% —— 百分比在有 gap 或 border 时容易错位，且无法响应内容变化。正确做法是清空基础尺寸，靠增长因子分配：
.container {
display: flex;
gap: 16px;
}
.item {
flex: 1; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}
这里 flex: 1 隐式设了 flex-basis: 0，所有项目从“零宽度”开始，按比例瓜分剩余空间（减去 gap 后的净宽），天然抗干扰、无累积误差。
flex-basis 百分比值的陷阱：它依赖父容器主轴尺寸，且不包含 gap
写 flex-basis: 25% 看似能做四列，但实际行为很脆弱：
立即学习“前端免费学习笔记（深入）”；
