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项的间距,，主轴结束位置到最后⼀个flex项的间距，都完全⼀样。
遗憾的是这个属性IE浏览器还不⽀持，如果项⽬需要兼容IE的话只能采⽤其他办法了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。