flex:1和flex:auto的区别
| 语法 | 等同于 | 备注 |
|---|---|---|
| flex: 1 | flex: 1 1 0 | 推荐 |
| flex: auto | flex: 1 1 auto | 使用场景少 |
从上面可以看出它们只有flex-basis不同，当容器拉伸缩小的时候，元素也会弹性增大和缩小；但是flex:1在尺寸不足时依然与其他元素保持等分，会优先压缩内容，flex:auto在尺寸不足时会优先最大化内容尺寸，挤压其他元素的空间。
flex：1的表现：
flex：auto的表现
使用场景
- flex：1 适用等分布局
- flex：auto 适用基于内容动态适配的布局
