flex-basis: 0 强制初始尺寸为0，完全依赖flex-grow分配空间；flex-basis: auto则尊重内容尺寸再分配剩余空间；二者混用易引发布局异常，调试应以computed样式为准。
flex-basis: 0 会忽略内容尺寸，强制按 flex-grow 比例分配空间
当 flex-basis 设为 0（或 0%），浏览器在计算剩余空间前，先把该项目的“基础尺寸”当作 0 处理。此时无论内容多宽、文字多长、图片多大，它都从零开始，完全依赖 flex-grow 去瓜分可用空间。
常见错误现象：flex: 1 下文字被严重压缩、图标错位、input 输入框变窄到无法输入——本质就是 flex-basis: 0% 导致初始尺寸归零，而 flex-grow: 1 又强行拉伸填满。
- 适用场景：等分布局（如三列导航、均分按钮组）、需要严格按比例控制宽度的卡片容器
- 注意
flex: 1等价于flex: 1 1 0%，不是“自适应”，而是“清零后重分” - 若同时设了
width，它会被忽略（flex-basis优先级更高）
flex-basis: auto 尊重内容尺寸，再考虑 flex-grow 分配
flex-basis: auto 是默认值，表示先按元素自身内容、width 或内在尺寸（intrinsic size）确定初始大小，之后才把剩余空间按 flex-grow 分配。
典型表现：一个带文字的按钮用 flex: auto，它不会被压扁；但换成 flex: 1，就可能缩成一条缝。
- 适用场景：表单控件组合（如 label + input + button）、图文混排区域、需要保内容可读性的列表项
- 若同时设置了
width和flex-basis: auto，width仍有效（但仅当flex-basis为auto时才如此） - 在
flex-direction: column下，flex-basis: auto对应的是height行为逻辑，同理
混合使用时的关键顺序和冲突点
真正容易出问题的地方，是把 flex-basis: 0 和 flex-basis: auto 放在同一容器里，又没控制好 flex-grow 的比例。
- 例如：
.a { flex: 0 0 300px; }（固定不伸缩） +.b { flex: 1; }（即flex: 1 1 0%）→.b会占满除 300px 外所有空间，且不看自己内容 - 若写成
.b { flex: auto; }（即flex: 1 1 auto），它会先按内容撑开，再把多余空间分走，可能导致换行或溢出 - 不要混用
flex: 1和flex: auto在同一行，除非你明确知道每个项目的初始尺寸如何参与计算 - 调试建议：用浏览器 DevTools 查看 computed 样式里的
flex-basis实际值，比猜更可靠
响应式中百分比 flex-basis 的实际效果
flex-basis: 50% 看似直观，但它基于父容器主轴的当前可用宽度（不含 padding），且受 flex-wrap 影响。一旦容器宽度变化，它会实时重算，但不会像 width: 50% 那样可能触发重排（reflow）。
- 适合做断点适配：比如小屏下
flex-basis: 100%（单列），中屏下flex-basis: 50%（双列） - 注意：百分比值在
flex-direction: column下对应的是高度，不是宽度 - 避免与
min-width/max-width冲突——flex-basis不会突破这些限制，但可能让flex-grow失效
flex-grow 调数字，忘了起点早被悄悄改写了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
