当把某个元素的所有子元素设置为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...
