<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列表 自動(dòng)換行，使用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

但是此時(shí)，換行后的4、5中間有一塊空白，因?yàn)閟pace-between，是item直接平分間距。讓最后兩個(gè)item靠左，解決方式：

.flex:after{
    content: "";
    width:55px; //寬度與flex-item一致
    background: rgba(51,51,51,.5); //價(jià)格背景色是方便看，一般是用透明色 transparent
}

換行后對(duì)齊效果.png