flex : 1和flex : auto这两个简写的属性在项目中我用的很多，但是对于这两个的区别还是有点模糊，今天就和我一起彻底搞懂这两个的区别，还有他们使用的场景吧。
一、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的表现：
html和css代码：
<style>
.flex-container {
display: flex;
}
.flex-container .flex-item {
flex: auto; /* flex:auto 时使用这个 */
/* flex: 1; flex:1 时使用这个 */
}
</style>
<!--...............-->
<div class="flex-container">
<div class="flex-item">
我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
</div>
<div class="flex-item">
我从哪里来
</div>
<div class="flex-item">
我要去哪里
</div>
</div>
二、flex:1 和 flex: auto适用的场景
适用flex：1的场景
当希望元素充分利用剩余空间，同时不会侵占其他元素应有的宽度的时候，适合使用flex:1，这样的场景在Flex布局中非常的多。
例如所有的等分列表，或者等比例列表都适合使用flex:1或者其他flex数值，适合的布局效果轮廓如下图所示。
适用flex：auto的场景
当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用flex:auto。
flex:auto多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用flex:auto效果来实现。基于内容自动分配宽度的自使用导航效果，如下图所示：
总结
- flex：1 适用等分布局
- flex：auto 适用基于内容动态适配的布局
本文参考了张鑫旭的《flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？》, 在此感谢原作者。
