flex-basis属性的auto与content取值分别有什么作用？

首先明确前提：flex-basis定义的是flex项目在主轴方向的初始尺寸，主轴是行还是列由flex-direction决定，这个是所有讨论的基础。

flex-basis: auto（默认值） #

它的计算逻辑分两种情况：

• 如果你给flex项目显式设置了主轴方向的尺寸：比如主轴是行时设置了width: 200px、主轴是列时设置了height: 150px，那么auto会直接取用你设置的这个尺寸，作为项目的初始主轴尺寸。
• 如果你没有给项目设置主轴方向的显式尺寸：那么auto会自动回退，和content取值的效果完全一致，由项目内容的实际大小决定初始主轴尺寸。

举个实际场景：flex容器flex-direction: row，内部有一个项目设置了width: 300px，flex-basis保持默认auto。这个项目的初始主轴宽度就是300px，后续再根据flex-grow、flex-shrink的配置，结合容器剩余空间做伸缩调整。

flex-basis: content #

这个取值的逻辑非常直接：完全忽略你给项目设置的主轴方向显式尺寸，只根据项目内部内容（文字、图片、子元素等）的实际撑开大小，来确定初始主轴尺寸。

还是拿上面的场景举例：同样是行方向的flex容器，内部项目设置了width: 300px，但额外加了flex-basis: content，此时你设置的width: 300px会直接失效，项目的初始主轴宽度完全由内部内容的大小决定。

核心注意点 #

• 尺寸优先级：flex-basis的优先级高于主轴方向的width/height，只要flex-basis的取值不是auto，你给项目设置的主轴width/height都不会生效。
• 注意和flex-basis: 0的区分：0是直接把项目初始主轴尺寸设为0，后续完全按flex-grow的比例分配容器空间，和content基于内容计算的逻辑完全不同。

内容的提问来源于stack exchange，提问作者Aditya Singh