flex 中的各个参数

• flex-grow 属性定义项目的放大比例 默认为0 即如果存在剩余空间 也不放大
• flex-shrink 属性定义了项目的缩小比例 默认为1 即如果空间不足 该项目将缩小

• flex-basis 属性定义了在分配多余空间之前 项目占据的主轴空间（相当于我们设置的width）

  默认值为：  flex:0 1 auto;（默认不放大 放不下了缩小 优先采用自己本身宽度）
  

flex: 1

flex: 1 1 0%; 有剩余空间就放大，空间不够就缩小，项目长度为0

 <div class="wrap">
    <div class="box">养乐多</div>
    <div class="box">不,是羊乐多多多多</div>
    <div class="box">羊乐多多多多喝养乐多</div>
 </div>
 
.wrap{
    height: 100px;
    display: flex;
}
.box{
    border: 2px solid yellowgreen;
    flex: 1;
}

flex: auto

flex: 1 1 auto;有剩余空间就放大，空间不够就缩小，项目长度为原本的长度

 <div class="wrap">
    <div class="box">养乐多</div>
    <div class="box">不,是羊乐多多多多</div>
    <div class="box">羊乐多多多多喝养乐多</div>
 </div>
 
.wrap{
    height: 100px;
    display: flex;
}
.box{
    border: 2px solid yellowgreen;
    flex: auto;
}

所以得出结论 ~

flex:1 和 flex:auto 的区别主要是在于 flex-basis

flex:1 不管内容多少，一般都是平分空间，空间大小都一致
而 flex:auto 是根据内容的大小来分，不是平的（除非内容都是一样，才平分）

————————————————
版权声明：本文为CSDN博主「羊乐多多多多」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Y_9906/article/details/128647208

推荐阅读文章

https://blog.csdn.net/weixin_39808181/article/details/114102051