17370845950

flex-basis用于设置弹性项目在分配多余空间前的初始主轴尺寸，其值可为auto、长度或百分比，优先于width生效，常通过flex简写属性统一配置，影响项目伸缩行为。

flex-basis 是 CSS Flexbox 布局中的一个关键属性，用于设置弹性项目（flex item）在分配多余空间前的初始主轴尺寸。

flex-basis 的作用

它定义了子元素在伸缩之前希望占据多大空间。浏览器会先按照 flex-basis 设置的值来确定项目的“基础大小”，然后再根据容器剩余空间和其它 flex 属性（如 flex-grow 和 flex-shrink）进行拉伸或压缩。

• auto：默认值。项目大小基于其内容或 width 属性。
• 长度值：如 200px、5em 等，明确指定基础尺寸。
• 百分比：相对于父容器主轴方向的尺寸，如 50%。
• 0：特别注意，当设为 0 时，空间分配完全由 flex-grow 控制，常用于等分布局。

与 width 的区别

在 flex 容器中，flex-basis 优先于 width 决定项目主轴大小。如果两者同时设置，flex-basis 会覆盖 width 的效果（除非 flex-basis 为 auto）。

实际使用建议

通常不单独使用 flex-basis，而是通过简写属性 flex 来统一设置：

• flex: 1 相当于 flex: 1 1 0% —— 可伸缩，基础大小趋近 0。
• flex: auto 相当于 flex: 1 1 auto —— 基于内容大小，可伸缩。
• flex: initial 相当于 flex: 0 1 auto —— 不伸展，按内容大小。

基本上就这些。理解 flex-basis 能帮助你更精准地控制弹性布局的空间分配。