先记住这个答案
flex-basis: auto（默认值）的意思是：如果子项设了 width，就用 width 的值作为基础尺寸；如果没设 width，就用内容的固有尺寸。flex-basis: content 则不管有没有 width，一律用内容的固有尺寸。所以区别只在子项设了 width 的时候：auto 会用 width，content 不会。
auto会读子项的widthcontent忽略width用内容尺寸- 没设
width时两者效果一样 auto是flex-basis的默认值
加了 width 之后差异才显现
子项没有设 width 时，auto 和 content 的行为完全一样，都是按内容大小来算基础尺寸。区别出现在子项设了 width 的时候。
auto 和 content 在有 width 时的差异CSS.container { display: flex; width: 600px; }
/* flex-basis: auto，有 width → 基础尺寸 = 200px */
.item-auto {
flex-basis: auto;
width: 200px;
}
/* flex-basis: content，有 width → 基础尺寸 = 内容宽度 */
.item-content {
flex-basis: content;
width: 200px; /* 被忽略 */
}auto 的子项按 200px 作为基础尺寸，content 的子项按文字或内容本身的宽度来算，width: 200px 被忽略了。
flex-basis 的优先级关系
flex-basis 有一个核心规则：当 flex-basis 不是 auto 时，它的优先级高于 width。也就是说 flex-basis: 200px 加 width: 100px，基础尺寸按 200px 算。
但 flex-basis: auto 是个特殊值，它的意思是「我不指定，去看 width」。这时候 width 又生效了。
content 也是一个特殊值，意思是「我不看 width，直接用内容尺寸」。可以理解为 auto 是「有 width 就听 width 的」，content 是「谁的话都不听，只看内容」。
什么时候用 content
实际项目中 flex-basis: content 用得很少，大多数时候 auto 就够了。content 的典型场景是：子项设了 width 用于其他布局上下文（比如它在不同容器里需要不同行为），但在 flex 容器里希望基础尺寸完全由内容决定。
另一个场景是导航链接：每个链接的 width 可能被全局样式设了一个值，但在 flex 导航栏里希望它按文字长度来排列，这时用 content 可以忽略那个 width。
容易答错的地方
- 以为
auto永远等于内容尺寸 auto只在子项没有width时才等于内容尺寸。如果子项有width，auto用的是width的值。面试时经常听到「auto就是按内容来」，这只说对了一半。- 搞混
flex-basis: 0和flex-basis: auto flex-basis: 0把基础尺寸设为 0，所有空间都变成「剩余空间」由flex-grow分配。flex-basis: auto把基础尺寸设为内容或width的值。写flex: 1时flex-basis是0%，写flex: auto时flex-basis是auto，效果差别很大。
面试官还会怎么问？
flex: 1 和 flex: auto 有什么区别？
flex: 1 展开是 flex: 1 1 0%，基础尺寸为 0，所有空间按 flex-grow 比例分配，子项平分空间。flex: auto 展开是 flex: 1 1 auto，基础尺寸按内容来，剩余空间再按比例分。内容多的子项会更宽。
flex-basis 和 min-width 哪个优先？
min-width 优先。flex-basis 决定的是伸缩前的初始尺寸，但最终尺寸不会小于 min-width。如果 flex-shrink 想把子项缩到 min-width 以下，缩不动。
flex-basis: content 的浏览器兼容性怎么样？
主流浏览器（Chrome、Firefox、Safari、Edge）都支持。但 IE 不支持，如果要兼容 IE 可以用 flex-basis: auto 加上不设 width 来达到类似效果。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。