flex布局如何让flex项之间的间距一样大

之前在使用flex布局的时候，为了让flex项之间产生间距，设置了如下属性：

ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
li{
  width:30%;
  height:100px;
}

设置之后发现中间的间距确实一样大,但是左边第一个和右边第一个flex项距离主轴两端的距离却和中间的间距不一样大，导致看上去不美观。
之前为了解决这个问题，通过padding属性来调节两边的间距，使它们看上去和中间的间距差不多大。
而现在通过一个简单的css属性就可以解决这个问题，那就是:

justify-content:space-evenly;

这个属性让flex项沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。
遗憾的是这个属性IE浏览器还不支持，如果项目需要兼容IE的话只能采用其他办法了。