flex: 0 0 100px 明确锁定主轴起点为100px且禁止伸缩，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 100px，而width: 100px在Flex容器中仅作fallback，不参与主轴计算。
flex: 0 0 100px 直接接管主轴尺寸计算起点
浏览器在 Flex 布局中分配空间时，第一步就是读取 flex-basis；只要它不是 auto，width 就被跳过不解析。写 flex: 0 0 100px 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 100px，相当于明确定义了“从 100px 开始，既不拉伸也不压缩”。而 width: 100px 只是通用盒模型属性，在 Flex 容器里降级为 fallback，连参与主轴计算的资格都没有。
width 在 flex 容器里受内容和默认约束双重干扰
width 单独存在时，实际渲染宽度常被以下因素突破：
- 长单词或 URL（如
https://example.com/verylongpath）不换行，直接撑开盒子 - 图片、iframe 等替换元素自带固有最小宽度，
min-width: auto默认生效 - 父容器没设明确宽度，
width: 100%失去参照，计算结果为auto - 某些旧版 Safari 或 Android WebView 对
width+ Flex 混用有渲染 bug
flex: 0 0 100px 同时封住伸缩性与内容兜底
仅靠 flex-shrink: 0 不够，因为内容仍可能撑大；仅靠 min-width: 100px 也不行，它只是下限，不阻止拉伸。而 flex: 0 0 100px 是组合解法：
-
flex-grow: 0→ 不会因剩余空间变大而拉伸 -
flex-shrink: 0→ 不会因空间不足而压缩 -
flex-basis: 100px→ 主轴起点锁定为 100px，内容再长也只影响交叉轴（比如换行） - 若还需防内容撑开，可叠加
min-width: 0（尤其含长文本或图片时）
响应式切换时 flex-basis 更可控
媒体查询中改尺寸，flex-basis 触发的是 Flex 布局重排，行为可预测；而改 width 只是静态样式，在 Flex 容器中极易被 flex-shrink 覆盖或被内容突破：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px) { .item { flex-basis: 100%; } }→ 项目独占一行，逻辑清晰 - 同样断点写
width: 100%→ 若父容器有gap或兄弟项未设flex-shrink: 0，仍可能溢出或错位 - Android WebView 4.4–5.1 对
flex-basis: 50%解析不准，但flex-basis: 100px或25vw稳定——说明固定值比百分比更可靠
flex-basis 不是“最大宽度”，也不是“固定宽度”，它只是空间分配的起点；后续是否溢出、换行、截断，取决于 min-width、white-space、overflow 的配合。单写 flex: 0 0 100px 并不能自动让长文本省略，该加的 text-overflow: ellipsis 和 min-width: 0 还得补上。 
