1、flex复合属性的三要素
flex 是 flex-grow：长/伸 、flex-shrink：缩 、 flex-basis：沿主轴方向的尺寸 三个属性的复合简写，语法格式为：flex: [flex-grow] [flex-shrink] [flex-basis];
- flex-grow： 控制项目如何 “瓜分” 父容器的剩余空间，默认值为 0（即不主动抢占剩余空间）。数值越大，占比越高。
- flex-shrink：控制项目在父容器空间不足时如何 “收缩”，默认值为 1（即空间不够时会缩小）。数值越大，收缩比例越高。
- flex-basis：控制项目的初始尺寸，默认值为 auto（即由项目自身内容或 width/height 决定），也可以设为具体数值（如 100px）或百分比。
2、核心对比：flex:1 和 flex:auto 的本质差异
| 简写属性 | 完整写法 | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|---|
| flex:1 | flex: 1 1 0% | 1 | 1 | 0% |
| flex:auto | flex: 1 1 auto | 1 | 1 | auto |
-
前两个属性 flex-grow 和 flex-shrink 的值完全相同（都是 1），真正的差异只在 flex-basis 上—— 一个是 0%，一个是 auto。
-
需要 “等分空间”—— 用 flex:1
-
需要 “优先保证内容显示”—— 用 flex:auto
-
这个差异会直接导致两个关键区别：
- 初始尺寸的计算依据不同；
- 剩余空间的分配逻辑不同。
3、视觉效果对比：肉眼可见的差异
| 容器类型 | 子元素宽度关系 | 内容显示状态 | 核心特点 |
|---|---|---|---|
flex:1 容器 | 完全相等 | 长内容可能被截断 / 换行 | 空间优先，无视内容 |
flex:auto 容器 | 长内容 > 短内容 | 两个子元素的内容都能完整显示 | 内容优先，再分空间 |
4、总结：一张表总结 flex:1 和 flex:auto 的核心差异和适用场景
| 对比维度 | flex:1 | flex:auto |
|---|---|---|
| 完整写法 | flex: 1 1 0% | flex: 1 1 auto |
| 初始尺寸依据 | 父容器的 0%（无视内容） | 自身内容或 width/height |
| 剩余空间分配 | 完全按比例分配 | 先保内容，再按比例分配 |
| 核心特点 | 等分空间，不受内容影响 | 优先保证内容显示 |
| 适用场景 | 导航栏、等分卡片 | 搜索框、标题 + 操作区 |
记住：不是所有 “占剩余空间” 的场景都用 flex:1，关键看你是否需要 “优先保证内容显示”。
注：文章参考
