SOURCE

<div class="box a">
    <div class="item">1-sd</div>
    <div class="item">2-aaa</div>
    <div class="item">3-bbbbb</div>
    <div class="item">4-adf</div>
    <div class="item">5-23</div>
    <div class="item">6-ddd</div>
    <div class="item">7-poi98</div>
    <div class="item">8-sfsfsf</div>
    <div class="item">9-asd</div>
    <div class="item">10-aaaa</div>
    <div class="item">11-bbbbbb</div>
    <div class="item">12-dd</div>
</div>

.box {
    background: red;
     width: 500px;
    /*
    height:400px; */
    display: flex;
    flex-direction: row;
    /* 如果不写高度/宽度，会在交叉轴上占完。*/
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}

.item{
    margin: 5px;
    background: #000;
    color: #fff;
    padding: 20px 30px;
    width: 80px;
    height: 60px;

    box-sizing: border-box;
}