flex：0 1 auto

flex:第一个参数表示flex-grow,用于设置元素占据剩余的空间，默认为0，表示不占据剩余空间

ex:

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>
<style>
    .container{
       width:1200px;
       display:flex;
    }
    .item1{
        width:300px;
        flex:0 1 auto;
    }
    .item2{
        width:400px;
        flex:1 1 auto;
    }
    .item3{
        width:400px;
        flex:2 1 auto;
    }
</style>

假设父容器总宽度为1200px，item1，item2，item3总共占据300+400+400=1100px,还剩余100px,item1的第一个参数为0，不参与占据剩余空间，item2和item3将剩余空间分成3分，各自分别追加100/3px,100*2/3px

2、第二个参数为flow-shrink，个人理解就是按比例缩减超出父容器宽度

ex：

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>
<style>
    .container{
       width:1200px;
       display:flex;
    }
    .item1{
        width:500px;
        flex:0 1 auto;
    }
    .item2{
        width:400px;
        flex:0 2 auto;
    }
    .item3{
        width:400px;
        flex:0 1 auto;
    }
</style>

三个子元素总宽度超出父容器100px,设置了参数为1 ，那么分别缩减的像素数为（500*1）/(500*1+400*2+400*1)*100px,（400*2）/(500*1+400*2+400*1)*100px,（400*1）/(500*1+400*2+400*1)*100px.

3.第三个参数为flex-basis,设置auto，可以自适应宽度

如有表述错误的地方，请各位及时指出，个人不胜感激！