flex实现等宽布局且间隔相等的小技巧。使用flex 布局让子元素宽度均分且左右间距相等。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;
 }

这里父容器设置了padding值，会影响父容器的宽高，如果不想影响可以设置

box-sizing: border-box;

原文地址：https://blog.csdn.net/sinat_33255495/article/details/118324934