仿京东pc端的一些收获

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