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% 看似能做四列，但实际行为很脆弱：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器
padding或子项有border，百分比仍按容器 content box 计算，容易撑破容器 -
gap不计入 flex 项目尺寸，但会占用主轴空间 → 实际每列可用宽度 25% - 当内容超长，
flex-shrink默认启用，它可能被压缩到文字换行甚至溢出，而非保持比例
所以除非你严格控制内外边距、禁用缩放（flex-shrink: 0），否则避免对 flex-basis 使用百分比。
响应式多列切换：用媒体查询重置 flex-basis 和 flex-grow
想在小屏变单列、中屏双列、大屏四列？不要用多个 flex-basis 百分比来回切，而是统一用 flex: 1 基础写法，再通过改变容器 flex-wrap 或子项数量控制布局流：
.container {
display: flex;
}
.item { flex: 1; }
<p>@media (max-width: 768px) {
.container { flex-wrap: wrap; }
.item { flex: 0 0 100%; } /<em> 单列，禁止伸缩，占满整行 </em>/
}
@media (min-width: 769px) and (max-width: 1024px) {
.item { flex: 0 0 50%; } /<em> 双列，基础宽度 50%，不增长不收缩 </em>/
}
@media (min-width: 1025px) {
.item { flex: 1; } /<em> 四列均分（需配合 4 个子项）</em>/
}注意：用 flex: 0 0 X% 时，X% 是相对于父容器宽度的静态分配，不再参与弹性分配，适合明确列数的场景；而 flex: 1 更适合“尽可能多列均分”的动态需求。
真正难的不是写对 flex-basis，而是判断什么时候该让它“归零”，什么时候该让它“定死”。多数自适应场景，从 flex-basis: 0 开始比从内容宽度开始更可控。
