SOURCE

<div class="flex-wrap">
    <div class="flex-container">
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
    </div>
</div>

html,body{
    margin: 0;
    padding:0

}
.flex-wrap {
    padding: 10px;
}
.flex-container{
    display: flex;
    align-content: flex-start; 
    flex-wrap: wrap;
}
.flex-container span{
    display: block;
    width: calc((100% - 20px)/3);
    background-color: #f00;
    margin-left:10px;
    color: #fff;
    height: 200px;
    margin-bottom: 10px;
    font-size: 50px
}
.flex-container span:nth-child(3n-2){
    margin-left: 0px;
}