flex-basis优先于width参与主轴计算，非auto时width被完全忽略；仅flex-basis:auto时width才作为内容尺寸后的fallback，且受min/max-width限制。
flex-basis 为什么总不按你写的 width 生效
因为 flex-basis 和 width 不是同一套计算逻辑：前者是 Flex 布局中主轴空间分配的“起点”，后者只是普通盒模型属性。浏览器优先用 flex-basis（哪怕你没显式写），而默认值是 auto——此时它会取元素自身的 width、height 或内容自然尺寸，但一旦有冲突或父容器未定义尺寸，结果就不可控。
常见错误现象：
- 写了
width: 200px，但子项实际宽远超或远小于 200px -
flex-basis: 100%没效果，子项缩成一条线 - 两个
flex: 1子项并排后，右边那个莫名换行
根本原因不是 CSS 写错，而是 flex-basis: auto 在内容塌缩或父容器无明确主轴尺寸时，退化为内容宽度，完全绕过你设的 width。
重置 flex-basis 的三种可靠写法
要真正“重置”基准尺寸，关键是显式声明 flex-basis 值，并切断默认收缩行为。以下写法按推荐度排序：
-
flex: 0 0 200px：最稳。第一个0关闭拉伸，第二个0关闭压缩，第三个值就是你要的基准尺寸（支持px、%、em等） -
flex-basis: 200px; flex-shrink: 0;：等价于上面，但更易读；注意必须配flex-shrink: 0，否则空间紧张时仍会被压扁 -
flex-basis: 0; flex-grow: 1;：适用于均分场景，比如三列等宽卡片；它放弃自身尺寸，靠flex-grow平分剩余空间，避免内容干扰布局
不要只写 width: 200px; flex-shrink: 0——flex-basis 还是 auto，在空元素或纯图标场景下，尺寸可能归零。
百分比 flex-basis 的陷阱与解法
flex-basis: 30% 看起来直观，但它依赖父容器主轴方向的**已知尺寸**。如果父容器是 display: flex 但没设 width 或 max-width，那 30% 就是 30% × 0 = 0px。
- 若父容器宽度由内容撑开（如未设
width的div），flex-basis: 50%会失效，子项可能堆成一列 - 解决方法：给父容器加
width: 100%、max-width: 1200px或其他明确值；或者改用固定值（flex-basis: 240px）+flex-shrink: 0 - 响应式场景下，可用媒体查询切换
flex-basis单位：@media (max-width: 768px) { .item { flex-basis: 100%; } }
box-sizing: border-box 是 flex-basis 可控的前提
即使你把 flex-basis 写得再准，如果子元素还是 box-sizing: content-box（浏览器默认），那 padding 和 border 会额外加在 flex-basis 之外，导致总宽超预期、换行、溢出。
必须做的一步：
- 全局加
* , *::before, *::after { box-sizing: border-box; }，且这条规则要放在所有自定义样式之前 - 不要只给 flex 子项单独设——它的子元素（比如按钮里的
span）也可能用content-box撑开布局 - 验证方式：打开 DevTools，选中子元素，看 computed 样式里
box-sizing是否为border-box，且width值是否包含 padding 和 border
flex-basis 的数值本身不含 padding/border，只有 box-sizing: border-box 才能让这个数值真正对应你眼睛看到的宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
