flex-basis 设置后元素不固定宽高，是因为可能被 flex-grow 拉伸或 flex-shrink 压缩；需同时设 flex-grow: 0 和 flex-shrink: 0（即 flex: 0 0 200px），或改用 width/height + flex-shrink: 0 更可靠。
flex-basis 设置后元素仍不固定宽高？先看它是否被 flex-grow 覆盖
flex-basis 指定的是“主轴方向上的初始尺寸”，但它不是最终尺寸。如果父容器设置了 flex-grow: 1（或任何非 0 值），子元素就会拉伸，覆盖 flex-basis 的设定。
- 想真正固定宽高，必须同时设
flex-grow: 0和flex-shrink: 0 - 仅写
flex-basis: 200px等价于flex: 0 1 200px，其中flex-grow: 0是默认值，但flex-shrink: 1允许压缩——在空间不足时仍会变小 - 稳妥写法是显式声明：
flex: 0 0 200px（即 grow=0, shrink=0, basis=200px）
用 flex: 0 0 auto 配合 width/height 才能兼顾内容自适应与边界控制
当元素内容长度不确定，又希望宽度不超过某个值、高度保持固定时，flex-basis: auto 单独不够用。
-
flex-basis: auto会让尺寸由内容或width/height决定，但不阻止拉伸/压缩 - 正确组合是：
flex: 0 0 auto+ 显式设置width: 200px或max-width: 200px - 若需高度固定且不换行，还要加
white-space: nowrap和overflow: hidden防溢出
flex-basis 的单位陷阱：百分比值依赖父容器主轴尺寸
flex-basis 支持 px、em、% 等单位，但百分比不是相对于父容器宽高，而是相对于父容器在主轴方向的可用尺寸。
- 父容器
flex-direction: row→flex-basis: 50%表示占父容器宽度的 50% - 父容器
flex-direction: column→flex-basis: 50%表示占父容器高度的 50% - 若父容器主轴尺寸未明确（如
height: auto），百分比flex-basis会失效，退化为auto
替代方案：width/height + flex-shrink: 0 更直观可靠
对多数“固定尺寸”需求，直接写 width 和 height 比折腾 flex-basis 更直白，尤其当不需要响应式缩放时。
立即学习“前端免费学习笔记（深入）”；
- 设
width: 120px; height: 40px; flex-shrink: 0;可确保不被压缩，也不受flex-grow影响 - 注意：若父容器是
flex-direction: column，则width控制水平尺寸，height才是主轴方向尺寸，此时flex-basis应设为height对应值 - 浏览器兼容性上，
width/height比flex-basis更稳，老版本 safari 对flex-basis: 0处理有偏差
实际中容易忽略的是：flex 容器的 min-width/min-height 默认为 auto，可能触发内部元素最小尺寸约束，让 flex-basis 看似“没生效”。需要检查父级是否隐式限制了可用空间。