简易flex双列布局

1,393 阅读1分钟
.flex-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #fff;
}

.flex-list .flex-list-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 48%;
    padding-bottom: 20px;
}

.flex-list .flex-list-item:nth-child(2n+1) {
    margin-right: 4%;
}

样式来自于m.duocaitou.com