如果還沒(méi)有使用過(guò)flex，請(qǐng)先拜讀下阮大大之Flex 布局教程：語(yǔ)法篇

在說(shuō)flex:1和flex:auto區(qū)別之前先回顧flex:0 1 atuo;
從默認(rèn)值上可以看出它有三個(gè)屬性，分別是 flex-grow、flex-shrink、flex-basis

flex-grow:項(xiàng)目的放大比例，默認(rèn)為0，如果存在剩余空間，不放大
flex-shrink:項(xiàng)目的縮小比例，默認(rèn)為1，如果空間不足，會(huì)適當(dāng)縮小
flex-basis:在分配空間之前，項(xiàng)目的主軸空間，相當(dāng)于我們?cè)O(shè)置的width，

如下:
flex參數(shù)縮寫(xiě)后三個(gè)屬性分別對(duì)應(yīng)的值:

flex:none;   // flex : 0,0,auto;
flex:auto;  // flex:1,1,auto;
flex:1;    //  flex:1,1,0%;

從上面可以看到flex:auto和flex:1的區(qū)別只在于flex-basis這個(gè)屬性，auto表示基準(zhǔn)值(也就是設(shè)置的width)，0%表示0無(wú)尺寸

<div class="flex-box">
    <div class="item1">Item1</div>
    <div class="item2">Item2</div>
    <div class="item3">Item3</div>
</div>

<style type="text/css">
    .flex-box{
         display: flex;
         width: 1000px;
         text-algin:center;
    }

    .item1 {
        height: 100px;
        width: 200px;
        flex: 2 1 0%; /*flex-basis為0%，覆蓋width，實(shí)際占用0*/
        background:red;
    }

    .item2 {
        height: 100px;
        width: 300px;
        flex: 2 1 auto;  /*flex-basis為auto，width權(quán)限更高，占用300*/
        background:green;
    }

    .item3 {
        height: 100px;
        flex: 1 1 200px; /*flex-basis為200，占用200*/
        background:blue;
    }
</style>

1、分配前,子元素占用空間：0 + 300 + 200 = 500
2、父級(jí)空間: 1000
3、可分配空間: 1000 - 500 = 500
4、放大系數(shù): 2 + 2 + 1 = 5
5、子元素獲取可放大空間：
?????? item1： 500 * 2/5 = 200
?????? item2： 500 * 2/5 = 200
?????? item3： 500 * 1/5 = 100
6、實(shí)際子元素空間:
?????? item1: 0 + 200 = 200
?????? item2: 300 + 200 = 500
?????? item3: 200 + 100 = 300

了解了嗎，明白了嗎，不管你懂沒(méi)懂，反正我懂了??。安排！