flex 换行

<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