flex-basis 定义 flex 项目在主轴方向的初始大小，优先级高于 width，常用取值有像素、百分比、auto 和 0；当与 flex-grow、flex-shrink 结合时，可精确控制空间分配，如实现等宽布局或固定侧边栏+自适应主区，设置为 0 可忽略内容尺寸并按比例分配剩余空间。

flex-basis 决定的是 flex 项目在分配多余空间前的初始大小。它类似于 width 或 height，但专门用于弹性布局中的主轴方向。

flex-basis 的基本作用

在弹性容器中，每个子元素（flex item）会先根据 flex-basis 确定其基准尺寸，然后再根据剩余空间和 flex-grow、flex-shrink 调整最终大小。

它的默认值是 auto，表示使用元素的内容大小或设置的 width/height 值。

常见取值包括：

• 具体长度：如 200px、10em
• 百分比：相对于父容器主轴尺寸的百分比，如 50%
• auto：根据内容或 width/height 计算
• 0：此时 content 不会影响基础尺寸，空间完全由 grow/shrink 分配

与 width 的区别

当 flex-direction 为 row 时，flex-basis 类似于 width，但它优先级更高且受 flex 布局机制控制。

如果同时设置了 width 和 flex-basis，flex-basis 会覆盖 width（除非 flex-basis 为 auto）。

例如：

flex-basis: 300px; width: 200px; → 实际基准宽度为 300px

配合 flex-grow 和 flex-shrink 使用

flex-basis 是完整 flex 属性的一部分。通常使用简写形式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• flex: 1 → 相当于 flex: 1 1 0%
• flex: 0 1 auto → 默认值
• flex: 0 0 200px → 不扩展不收缩，固定 200px

当设置为 0 时（如 flex-basis: 0），内容本身不会占用额外空间，所有空间按比例分配，避免因内容长短导致不均。

实际应用场景

适合需要精确控制初始尺寸的弹性布局，比如等分布局、侧边栏+主内容区。

例如创建两个等宽项：

flex-basis: 50%;

或一个固定宽度侧边栏 + 自适应主区域：

侧边栏：flex: 0 0 240px；主区域：flex: 1 1 0%

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！