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;
}

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

這是因為元素設定的：

1 div{ 2 flex: auto ; 3 }

等于：

1 div{
2  flex-grow:1;
3 flex-shrink:1;
4  flex-basis:auto;
5  }

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

1 div{
2 flex-grow:1;
3 flex-shrink:1;
4 flex-basis:0%
5 
6 }

或者更加簡便的寫法：

1 div{
2 flex:1;
3 }

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

flex簡寫形式的表達含義

（1）flex-grow屬性：定義專案的放大比例，默認是0，即如果存在剩余空間，也不放大，如果所有專案的flex-grow屬性都為1，則他們將等分剩余空間，如果一個專案的flex-grow的屬性為2，其他專案都為1，則前者占據的剩余空間比其他大一倍，

（2）flex-shrink屬性：Flex-shrink屬性定義了專案的縮小比例，默認是1，即如果空間不足，該專案將縮小，如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小，如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小，

（3）flex-basis 屬性定義了在分配多余空間之前，專案占據的主軸空間

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%; 
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/126453.html

標籤：其他

上一篇：sencha app build 時無法更新 bootstrap的 Ext.manifest配置解決方法

下一篇：uni-app開發經驗分享三： Vuex實作登錄和用戶資訊留存