提醒：本文最后更新于 2026-05-24 05:12，文中所关联的信息可能已发生改变，请知悉！
提醒：本文最后更新于 2026-05-23 09:16，文中所关联的信息可能已发生改变，请知悉！
提醒：本文最后更新于 2026-05-23 09:04，文中所关联的信息可能已发生改变，请知悉！
css 中的 flex 的作用是设置宽度，它有三个属性，flex-basis，flex-grow，flex-shrink.
1. 作用： 设置宽度
2. 属性：
flex-grow 扩展比率
flex-shrink 收缩比率
flex-basis 伸缩基准值
flex 默认值为:0 1 auto , 即 flex-grow:0; flex-shrink:1; flex-basis:auto;
三个属性的作用：在 flex 布局中，父元素在不同宽度下，子元素是如何分配父元素空间的，且这三个属性都是在子元素上设置的。
flex-basis
- 设置元素的宽度，虽然 width 也可以设置元素的宽度，但 flex-basis 会覆盖 width 的值。它规定的是子元素的基准值，是否溢出的计算与此属性相关，它规定的范围取决于 box-sizing。
- 默认值为：auto
- 取值情况：
auto: 首先检索该元素的主尺寸，如果主尺寸不为 auto, 则使用值采取主尺寸的值，如果是 auto, 使用 content
content: 该子元素的内容自动布局，有的用户代理没有实现 content 值，等效的替代方案是 flex-basis 和主尺 寸都取 auto.
百分比：根据伸缩父容器的主尺寸计算，如果父容器的主尺寸取决于子元素，则计算结果和设为 auto 的一样.
- 补充：flex-basis 与 width 的区别
如果没有设置 flex-basis 属性，flex-basis 的大小为项目 width 的大小。
如果没有设置 width 属性，flex-basis 的大小就是项目内容 content 的大小。
使用 max-width、min-width 来限制 flex-basis：
item{
flex-basis:250px;
max-width:100px;
}
item{
flex-basis:100px;
min-width:250px;
}
flex-grow
- 当父元素的宽度 > 所有子元素的宽度的和时，即父元素有剩余空间，子元素分配父元素的剩余空间。
- 默认值：0，表示该子元素不索取父元素的剩余空间。若值 > 0，表示索取，值越大，索取的越多。
flex-shrink
- 当父元素的宽度 <子元素的宽度之和时，即子元素超出父元素，子元素缩小自己的宽度。
- 默认值：1，父元素宽度 <子元素宽度之和，子元素宽度缩小。值越大，减小得越厉害。若值为 0，表示不减小。
3.flex 三个属性常见的取值：
flex flex-grow flex-shrink flex-basis 备注
默认值 0 1 auto
none 0 0 auto
auto 1 1 auto
1(非负) 1 1 0% 视为 flex-grow 的值
24px(长度) 1 1 24px 视为 flex-basis 的值
0%(百分比) 1 1 0% 视为 flex-basis 的值
2 3(两个非负) 2 3 0% 视为 flex-grow、shrink 的值
23 32px 23 1 32px 视为 flex-grow、basis 的值,flex-shrin 取 1
