flex:1; 與 flex:auto;

在項目練習中，發現利用彈性布局方式為盒子設置相同的屬性：

.main>.section{
    display: flex;
    height: 100px;
    margin: 4px 2px;
}
.main>.section>.col{
    background: #ff5555;
    flex: auto ;
    border-left: 1px solid #fff;
    box-sizing: border-box;
    text-align: center;
}

並不能使得每一行的盒子在主軸方向上平分彈性容器的尺寸（此處為寬度）：

 這是因為為元素設置的

div{
    flex: auto ;      
}

等同於

div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

 flex-basis: auto;會使得盒子的寬度由盒子內容決定，要想使得寬度一致，並且當主軸方向存在剩余空間就統一擴大，空間不足則縮小，應該改變其值為：

div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

或者更簡便的寫法：

div{
    flex: 1;
}

上述兩者效果是一致的，得到結果如圖：

 

 

 flex簡寫形式的表達含義

 

div{
    flex: none;
}
/* 等同於 */
div{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

div{
    flex: auto;
}
/* 等同於 */
div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

div{
    flex: 1; /* 非負數 */
}
/* 等同於 */
div{
    flex-grow: 1; /* 非負數 */
    flex-shrink: 1;
    flex-basis: 0%;
}

div{
    flex: 0%; /* 長度或百分比 */
}
/* 等同於 */
div{
    flex-grow: 1; 
    flex-shrink: 1;
    flex-basis: 0%; /* 長度或百分比 */
}

div{
    flex: 1 2; /* 兩個非負數 */
}
/* 等同於 */
div{
    flex-grow: 1; /* 第一個非負數 */
    flex-shrink: 2; /* 第二個非負數 */
    flex-basis: 0%; 
}