.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; }
并不能使得每一行的盒子在主軸方向上平分彈性容器的尺寸（此處為寬度）：
這是因?yàn)樵卦O(shè)置的： 1 div{ 2 flex: auto ; 3 } 等于： 1 div{ 2 flex-grow:1; 3 flex-shrink:1; 4 flex-basis:auto; 5 }
flex-basis:auto;會(huì)使盒子的寬度由盒子內(nèi)容決定，要想使得寬度一致，并且當(dāng)主軸方向存在剩余空間就統(tǒng)一擴(kuò)大，空間不足則縮小，應(yīng)該改變其值為： 1 div{ 2 flex-grow:1; 3 flex-shrink:1; 4 flex-basis:0% 5 6 }
或者更加簡便的寫法： 1 div{ 2 flex:1; 3 }
上述兩者的效果是一樣的，得到的結(jié)果如圖：
flex簡寫形式的表達(dá)含義 （1）flex-grow屬性：定義項(xiàng)目的放大比例，默認(rèn)是0，即如果存在剩余空間，也不放大，如果所有項(xiàng)目的flex-grow屬性都為1，則他們將等分剩余空間，如果一個(gè)項(xiàng)目的flex-grow的屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間比其他大一倍。
（2）flex-shrink屬性：Flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)是1，即如果空間不足，該項(xiàng)目將縮小，如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小，如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。 （3）flex-basis 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間 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; /* 非負(fù)數(shù) */ } /* 等同于 */ div{ flex-grow: 1; /* 非負(fù)數(shù) */ flex-shrink: 1; flex-basis: 0%; } div{ flex: 0%; /* 長度或百分比 */ } /* 等同于 */ div{ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; /* 長度或百分比 */ } div{ flex: 1 2; /* 兩個(gè)非負(fù)數(shù) */ } /* 等同于 */ div{ flex-grow: 1; /* 第一個(gè)非負(fù)數(shù) */ flex-shrink: 2; /* 第二個(gè)非負(fù)數(shù) */ flex-basis: 0%; }
|
|
|
