css - flex 布局 之元素换行显示

1. flex布局

<div class="weui-centent">
    <div class="item">
        <span><span>
        <p>商铺</p>
    </div>
    <div class="item">
        <span><span>
        <p>商铺</p>
    </div>
    <div class="item">
        <span><span>
        <p>商铺</p>
    </div>
    <div class="item">
        <span><span>
        <p>商铺</p>
    </div>
</div>

.weui-content {
    display: flex;
    flex-flow: row wrap;   // 换行
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}
.item {
    display: flex;
    flex: 0 1 33.333%;
    order: 0;
    align-self: center;
    flex-direction: column;
    justify-content: center;
    padding: 15px 0;
    border-bottom: 1px solid #efefef;
    border-right: 1px solid #efefef;
    box-sizing: border-box;
}
.item:nth-of-type(3n+3) {
    border-right: none;
}
.item > span {
    width: 30px;
    height: 30px;
    background: #fff url(logo.png) no-repeat center;
    background-size: contain;
    align-self: center;
    padding-bottom: 15px;
}
.item > p {
    align-self: center;
}