flex-basis 设置的是弹性项在主轴方向上的「初始大小」，浏览器先按此分配空间，再由 flex-grow/shrink 调整；它优先级高于 width（仅主轴），但不控制最终尺寸或内容溢出。
flex-basis 设置的是什么尺寸？
它设置的是弹性项在主轴方向上的「初始大小」，不是最终宽度，也不是最小宽度。浏览器先按 flex-basis 分配空间，再根据 flex-grow 和 flex-shrink 调整——所以即使写了 flex-basis: 200px，最终可能被拉伸或压缩。
常见错误现象：flex-basis: 0 后元素完全不占空间，但内容又撑开了容器；或者设了 flex-basis: 100% 却发现没占满父容器——因为百分比是相对于父容器主轴尺寸计算的，而父容器若没设宽高，100% 就是 0px。
-
flex-basis为auto（默认）时，取元素自身 width/height 或内容自然尺寸 -
flex-basis: 0+flex-grow: 1是均分空间最稳的组合，避免内容干扰布局 - 百分比值依赖父容器主轴尺寸；若父容器主轴尺寸未定义（如 flex 容器没设
width），则flex-basis: 100%无效
flex-basis 和 width 冲突时谁生效？
当 flex-basis 和 width 同时存在且值不同，flex-basis 优先级更高——但仅限于 flex 布局中作为主轴初始尺寸使用；width 在非 flex 场景或交叉轴上仍起作用。
容易踩的坑：写成 width: 200px; flex-basis: 100px;，结果元素初始主轴尺寸是 100px，但开发者误以为 width 会兜底；更隐蔽的是用 CSS 预处理器变量混用，比如 width: var(--size); flex-basis: var(--size);，看似一致，但若变量解析出错，就只剩一个生效。
立即学习“前端免费学习笔记（深入）”；
- 在 flex 容器内，
flex-basis覆盖width对主轴尺寸的影响 -
flex-basis: auto会回退到width值（如果设置了），否则取内容尺寸 - 不要同时用
flex-basis和width控制同一方向尺寸，除非你明确需要这种 fallback 行为
flex-basis 为 0 时内容溢出怎么办？
flex-basis: 0 让弹性项“从零开始分配”，适合配合 flex-grow 均分空间，但它本身不约束内容长度。文字、图片或子元素一旦超出分配到的空间，就会溢出或换行，取决于 white-space 和 min-width 等其他属性。
典型场景：卡片列表用 flex: 1 1 0 布局，但某张卡片标题超长，把整行撑变形。这不是 flex-basis 的问题，而是缺少内容截断或最小尺寸控制。
- 加
min-width: 0（对 flex 项）可让浏览器允许内容压缩，防止溢出撑宽 - 长文本需配合
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - 图片建议设
max-width: 100%; height: auto;，否则会突破flex-basis分配的空间
Flexbox 中 flex-basis 的兼容性注意点
IE10–11 支持 flex-basis，但有严重 bug：当值为 0 时，部分版本会忽略 flex-grow，导致不拉伸；设为 0px 才能正常工作。Chrome 44+、Firefox 22+、Safari 9+ 均无此问题。
另一个隐藏风险：PostCSS 自动补全不会为 flex-basis 加 -ms- 前缀，但 IE 需要它才能识别（虽然实际支持，但某些旧构建流程会因缺失前缀报 warning 或降级）。
- 兼容 IE 时，统一用
flex-basis: 0px，别写0或0% - 避免在
@supports中只检测display: flex，要加上flex-basis的具体支持判断 - Safari 8 及更早不支持
flex-basis，必须降级为width+float或 JS 补偿
flex-basis 看似简单，真正难的是它和 content、min/max 尺寸、grow/shrink 的三方博弈——稍不留神，内容就跳出预期轨道。
