flex-basis: 0 强制初始尺寸为0，空间全由flex-grow分配，适用于严格等分；flex-basis: auto 则先按内容或width确定初始尺寸，再分配剩余空间。
flex-basis: 0 是强制归零初始尺寸
它让元素在 flex 布局中“假装自己宽度/高度为 0”，不占用任何基础空间，后续所有主轴空间都由 flex-grow 从零开始分配。适用于严格等分场景，比如三列卡片均分容器宽度：flex: 1 1 0 比 flex: 1 更可控，避免内容干扰。
常见错误是写成 flex-basis: 0%：它仍会尝试解析百分比，若父容器主轴尺寸未明确（如 width: auto），计算可能失败或回退为 auto；而 0 是绝对值，无歧义。
-
flex-basis: 0不受元素自身width或内容影响 - 必须配合
flex-grow: 1才能撑满空间，否则会坍缩成一条线 - 在 Safari 旧版本中，
flex-basis: 0对min-width: auto的处理略有差异，建议显式加min-width: 0
flex-basis: auto 尊重内容或显式宽高
这是默认行为，浏览器先按元素的 width/height（如有）或内容自然尺寸确定初始大小，再把剩余空间交给 flex-grow 分配。容易导致“内容长的项目占得多、短的占得少”，尤其在列表项文字长度不一时明显。
典型误用：给卡片容器设 flex-basis: auto + flex-grow: 1，结果标题长的卡片变宽，破坏网格对齐。此时应改用 flex-basis: 0。
- 若元素没设
width，flex-basis: auto等价于flex-basis: content（内容固有尺寸） - 若元素设了
width: 200px，则flex-basis: auto就取 200px，不是 0 - 在
flex-direction: column下，它查的是height，不是width
flex: 1 和 flex: 1 1 0 渲染效果相同但逻辑不同
两者最终计算出的 flex-basis 都是 0px，视觉上没区别。但 flex: 1 是简写，隐含 flex-basis: 0；而 flex: 1 1 auto 的 flex-basis 是 auto，实际效果反而和 flex: 1 不同——这点极易被 devtools 的“已计算值”误导。
关键点在于：浏览器对 flex: 1 的实现是直接设 flex-basis: 0，不是先算 auto 再覆盖。所以不要依赖“flex: 1 等价于 flex: 1 1 auto”这种想当然的推论。
- 检查 computed style 时，
flex-basis显示为0px≠ 它是通过auto计算来的 -
flex: 0是特例：它展开为flex: 0 1 0，注意第三个值是0（不是auto），所以仍会参与收缩 - 真要禁用伸缩，得用
flex: none（即0 0 auto）
什么时候该选 0，什么时候该选 auto
选 0：需要精确控制比例分配，比如水平导航栏均分、卡片列表保持列宽一致、避免内容撑开导致换行。
选 auto：希望保留内容语义宽度，比如表单控件（输入框宽度由 placeholder 文字长度暗示）、按钮（文字多就宽一点）、或与非 flex 元素对齐时需保持原有尺寸。
- 响应式中慎用
flex-basis: auto：内容随屏幕变窄时，初始尺寸可能突然缩小，导致flex-grow分配失衡 -
flex-basis: content是实验性值，Chrome 支持但 Firefox/Safari 基本不支持，生产环境别碰 - 如果父容器主轴尺寸不确定（如嵌套在
display: contents或position: absolute中），flex-basis: 0%可能失效，0更稳
实际布局中，最易被忽略的是：flex-basis 的起点不是“要不要伸缩”，而是“空间分配从哪开始算”。这个起点一旦错，后面 grow/shrink 全跟着偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
