flex-basis 在 row 下替代 width，在 column 下替代 height；它根据 flex-direction 决定主轴方向，从而控制对应维度，而非固定作用于 width 或 height。
flex-basis 会覆盖 width，但覆盖逻辑取决于主轴方向 —— 水平主轴时它接管 width，垂直主轴时接管 height；不是“哪个更宽”，而是“哪个管当前主轴”。
flex-basis 在 row 和 column 下分别替代 width 还是 height？
浏览器不看属性名，只看 flex-direction 决定主轴。主轴一变，flex-basis 控制的维度就跟着变：
- 当
flex-direction: row（默认）时，主轴水平 →flex-basis替代width，height变成交叉轴，不受flex-basis影响 - 当
flex-direction: column时，主轴垂直 →flex-basis替代height，width变成交叉轴，此时设width: 200px不影响主轴分配，只约束横向显示 - 响应式中动态切换
flex-direction却没同步改flex-basis单位（比如从flex-basis: 200px切到column后还留着），可能导致高度塌缩或溢出 —— 因为 px 值在垂直主轴下被当成了高度基准，而父容器可能没设height
为什么 flex-basis: auto 不等于 width 的值？
flex-basis: auto 是个内容感知的 fallback 机制，不是简单读取 width：
- 它先检查元素内容的固有尺寸（比如图片原始宽、文字撑开宽度）
- 再 fallback 到
width（水平主轴）或height（垂直主轴） - 最后受
min-width/max-width（或对应高度）限制 - 所以
width: 150px; flex-basis: auto;在内容只有两个字时，实际宽度可能远小于 150px；而flex-basis: 150px;强制起点为 150px，哪怕内容为空
移动端 column 布局中 flex-basis 写百分比容易失效？
在 flex-direction: column 下用 flex-basis: 50%，浏览器会按父容器的 height 计算 —— 但多数移动端 flex 容器的 height 是 auto，导致 50% 解析为 0px：
- 真要等分高度，得确保父容器有明确
height（如height: 100vh）或用视口单位：flex-basis: 50vh - 旧版 Android WebView（4.4–5.1）对
flex-basis: 50%解析不准，推荐改用固定值或vw/vh - 微信 X5 内核对
flex-basis: 0压缩极狠，建议搭配min-height: 0（垂直主轴下）防塌陷
真正容易被忽略的点：主轴方向切换时，flex-basis 的单位是否还指向有效参照系。写死 px 值在 row 下稳，在 column 下可能变成无效高度；写 % 又依赖父级尺寸是否已知 —— 这不是属性本身的问题，而是你有没有把主轴、参照系、fallback 链一起想清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
