使用css3的Flex布局實現列表展示

實現效果圖如下：

 

通過css3樣式實現（部分代碼）：

.box {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-content: flex-start;
}

 

在實際中會遇到list列表對3取余剩2的情況，頁面就不是我們想要的了

我們想實現的是最后的一個靠左，這時候需要借助一個盒子，內容為空，邊框顏色為背景色，代碼如下：

.foodie-right-li-block {
    border-color: #f6f7f7;
}

需要注意的是，在list對3取余剩1和0的時候是不需要的，因此需要添加判斷

<view class="foodie-right-li foodie-right-li-block" v-if="list.length % 3 != 0"></view>

結果如下：

 

好啦，到這里就結束了

如果想實現每行顯示4個label發現這個方法不好使了，其實還是能夠套用的，更改取余就好啦，代碼如下：

<view class="foodie-right-li foodie-right-li-block" v-if="class_fixed_new.length % 4 == 2 || class_fixed_new.length % 4 == 3" v-for="(item,index) in (4-class_fixed_new.length% 4 )"></view>

說明：

　　1. class_fixed_new為list列表

　　2.因為余數為1和4的時候是不需要增加額外的盒子來輔助布局，隱藏通過v-if來現在，不加也可以，但是得加余數為0的判斷

 

 

 

3.實現發布朋友圈的照片列表展示

 

 

話不多說，直接上碼

<view class="release-imgs">
    <view class="release-imgs-li" v-for="(item,index) in imgsList" :key="index"></view>
    <view class="release-imgs-li release-imgs-li-add" v-if="imgsList.length != 9">+</view>
    <view class="release-imgs-li release-imgs-li-block" v-if="imgsList.length == 1 || imgsList.length == 4 || imgsList.length == 7"></view>
</view>

 

<script>
    export default {
        data() {
            return {
                imgsList: [0,1]
            }
        },
    }
</script>

 

<style lang="less">
    // 圖片
    .release-imgs {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;

        .release-imgs-li {
            width: 220upx;
            height: 220upx;
            background: goldenrod;
            margin-bottom: 15upx;
        }

        .release-imgs-li-add {
            background: #c9caca;
            font-size: 100upx;
            line-height: 200upx;
            text-align: center;
        }

        .release-imgs-li-block {
            background: #eee;
        }
    }
</style>

 

如果list的長度是1，4，7，那么需要一個額外的盒子