當把某個元素的所有子元素設置為flex: 1;時，并不能保證每個子元素占用的寬度相等
例如：
*{
box-sizing: border-box;
}
.container {
width: 600px;
height: 100px;
background: #ccc;
display: flex;
.box {
flex: 1;
&:not(:last-child){
border-right: 1px solid red;
}
}
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
上面這段代碼并不能保證每個.box元素的寬度都為60px;因為前5個元素都有一個border-right的屬性，這個值為1，而最后一個元素并沒有此值，所以前五個元素的寬度計算值其實為(600-5)/6 + 1;最后一個元素的寬度為（600-5)/6;
- 也就是說，設置flex屬性后，它真正計算時，會首先把占用寬度的確定的值拋去，然后在剩下的寬度中按比例分配。
To be continued...
