flex-basis 弹性基础属性
最后更新：2026-09-13
flex-basis flex-basis 弹性基础属性
flex-basis 属性用于设置弹性项目在分配剩余空间之前的初始主轴尺寸，可以理解为项目的"理想大小"。它的默认值为 auto，表示项目按内容或设定的 width/height 决定基础尺寸。设置为具体长度值后，项目会以此为基础，再根据 flex-grow 和 flex-shrink 进行伸缩。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
flex-basis: auto | content | <length> | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | content | 关键字 | 自动或内容决定 |
<length> | <percentage> | 类型 | 固定基础尺寸 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-basis | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| 所有主流浏览器均支持 | |||||
提示： 当 flex-basis 为 0 时，所有项目的基础尺寸都被视为 0，剩余空间完全按 flex-grow 比例分配，常用于实现等宽列布局。
重要： flex-basis 的优先级高于 width/height，但低于 max-width/max-height 和 min-width/min-height。当同时设置 flex-basis 和 width 时，flex-basis 会覆盖 width。
❓ 常见问题
Qflex-basis 和 width 有什么区别？
A弹性布局中 flex-basis 优先级高于 width：它决定子项在主轴上的初始尺寸并参与伸缩计算，width 只在 flex-basis 为 auto 时生效。建议弹性项目用 flex-basis 定义基础尺寸，width 留给非弹性场景。
Qflex-basis: auto 和 flex-basis: content 有什么区别？
Aauto 表示按子项的内容或设定的 width/height 决定基础尺寸；content 表示完全按内容决定基础尺寸，忽略 width/height 设置。content 关键字的浏览器兼容性较差，实际项目中推荐用 auto，效果在大多数场景下已足够。
Qflex-basis: 0 和 flex-basis: auto 有什么区别？
Aflex-basis: auto 以内容或 width 作为基础尺寸，内容不同的子项基础宽度不同，剩余空间再按 flex-grow 分配；flex-basis: 0 让基础宽度归零，剩余空间完全按比例分配，能实现严格等宽。flex: 1 是 1 1 0%，flex: auto 是 1 1 auto，两者效果截然不同。
🏷️ 相关属性
💡 相关案例
📚 相关教程
