本文主要是介绍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的话只能采用其他办法了。
这篇关于flex布局如何让flex项之间的间距一样大的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
