flex实现等宽布局且间隔相等的小技巧

要实现的效果：

HTML

<section class="father">
      <div class="item item-1"></div>
      <div class="item item-2"></div>
      <div class="item item-3"></div>
 </section>

CSS

.father {
      display: flex;
      padding : 20px;
      width: 300px;
      height : 200px;
      border : 5px solid #000;
 }
.item {
    flex : 1;
}
.item-1 {
    background: red;
}
.item-2 {
    background: green;
 }
.item-3 {
    background: blue;
}

/*重点代码*/
.father .item + .item {
     margin-left : 20px;
 }

最终效果