<div class="flex">
<div class="flex-item">1111111</div>
<div class="flex-item">22</div>
<div class="flex-item">333</div>
<div class="flex-item">44</div>
<div class="flex-item">5555</div>
</div>
如代码所示，item定宽的情况，想让item列表 自动换行，使用css
<style type="text/css">
.flex{
width: 200px;
border:1px solid #ccc;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item{
width: 55px;
height: 50px;
margin:0 0 10px;
background: #f2f2f2;
}
</style>
换行效果.png
但是此时，换行后的4、5中间有一块空白，因为space-between，是item直接平分间距。让最后两个item靠左，解决方式：
.flex:after{
content: "";
width:55px; //宽度与flex-item一致
background: rgba(51,51,51,.5); //价格背景色是方便看，一般是用透明色 transparent
}
换行后对齐效果.png
