flex-basis 是 Flex 布局中空间分配的“起始锚点”，决定项目在计算剩余空间前的初始尺寸，优先级高于 width；其值在 column 方向控制 height，且需配合 flex-grow/shrink 才能实现预期缩放或等分效果。
flex-basis 不是 width 的替代品，而是 Flex 布局中空间分配的“起始锚点”——它决定每个项目在计算剩余空间前先占多大位置。
flex-basis 的实际计算时机
Flex 布局的空间分配分三步：先按 flex-basis 分配初始尺寸，再算剩余空间，最后按 flex-grow/flex-shrink 调整。这意味着 flex-basis 优先级高于 width（当两者共存时，flex-basis 生效，width 被忽略）。
-
flex-basis: auto（默认）→ 读取元素自身的width或height（取决于主轴方向），但若未显式设置，则退化为内容宽度 -
flex-basis: 0→ 强制从 0 开始分配剩余空间，配合flex-grow: 1可实现真正等分（避免内容宽度干扰） -
flex-basis: 200px或flex-basis: 30%→ 直接作为基准尺寸参与计算，百分比基于容器主轴尺寸（不是父元素宽高）
常见错误：把 flex-basis 当成固定宽度用
很多开发者设了 flex-basis: 200px 就以为元素“一定就是 200px”，结果发现它被拉伸或压缩了——这是因为 flex-grow 和 flex-shrink 仍在起作用。
- 如果想“锁死”尺寸，必须同时设
flex-grow: 0和flex-shrink: 0，例如：flex: 0 0 200px - 仅写
flex-basis: 200px且未改flex-grow（默认为 0）时，它不会放大；但如果父容器有剩余空间且你写了flex-grow: 1，它就会撑开 - 在
flex-direction: column下，flex-basis控制的是高度，此时height属性会被覆盖
flex-basis: content 的兼容性陷阱
flex-basis: content 理论上让项目按内容自然宽度/高度起步，但它的支持度有限：Chrome 63+、Firefox 61+、Safari 12.1+ 才开始支持，IE 完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 在旧版 Safari 中，
content会退化为auto，可能触发意外的width计算逻辑 - 如果依赖内容尺寸做响应式布局（比如按钮文字长度不一），建议用
min-width+flex-basis: auto组合兜底 - 注意：
content不等于 “内容宽度”，它包含 padding/border（box-sizing 决定），且受 white-space 影响
真正容易被忽略的点是：flex-basis 的值在 flex-flow 为 column 时控制 height，但很多人只记住了 “它类似 width”，却在垂直布局里还硬套水平思维去调 width —— 这时候布局就悄悄崩了。
