由于display: flex导致的margin重叠的解决方案

最近工作有遇到过这个问题，（其实以前也遇到过，不过以前遇到直接重构代码，现在想想好不值得）。
ps: 网上有很多解决方案，但无异于以下几种：

1.外层padding
2.透明边框border:1pxsolidtransparent;
3.绝对定位postion:absolute:
4.外层DIVoverflow:hidden;
5.内层DIV　加float:left;display:inline;
6.外层DIV有时会用到zoom:1;
（看来看去都是这些方法，没人提到有display: flex所致的）

问题重现：

image.png

wxss代码：

.aaa {
  width:690rpx;
  height:240rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
  box-sizing:border-box;
  justify-content:space-between;
  border-radius:30rpx;
  background-color:#fff;
  padding:39rpx;
  margin:20rpx 0;
}

其中我们只要看margin: 20rpx 0跟待会讲到的display: flex这两句就好了。
每个item都有一个上下为20rpx的间距，但现在他们重叠了。我试着把display: flex改为display: block，发现问题一致，然后，我再试着把它改为display: inline-block，发现间距就不重叠了，问题得以解决。因此就类比到display: inline-flex上，看名字盲猜都知道是inline-block一类东西，果然设置inline-flex问题完美解决。

只需改一句：

display:inline-flex;

他们就隔开了

image.png

都看到这里了，再分享一个更简单实用的方法，在两两div之间插入一个新的div，设置高度1px即可。

我是有margin重叠问题的div1

我是有margin重叠问题的div2