鍍金池/ 問答/網絡安全  HTML/ Vuejs中網格布局組件

Vuejs中網格布局組件

想實現(xiàn)類似 MadeWithVuejs 網站主頁類似的效果的網格布局，使用 table 中的 row 和 column 屬性能不能實現(xiàn)這樣的效果呢？(正在嘗試用table去寫，先提個問題看看有沒有好用的Vue組件)

效果就是:

  1. 每條記錄對應一個Card

  2. 每一行最多只有3個Card

  3. 添加一條記錄，就添加一個Card，每一行超過3個時，自動換行到下一行

  4. 底部有頁導航，每一頁設定比如說最多顯示4行

具體的效果可以參看: MadeWithVuejs 的主頁

一行最多有3列

一頁最多有4行

或者你有沒有自己比較好的實現(xiàn)思路，希望能把思路講的詳細些。

2017-11-16 更新

使用 @tony_gong 提供的方式 flex 布局，很好的實現(xiàn)了上面的所說的效果，代碼如下：

<template>
    <!-- 網格 -->
    <div class="grid"> 
        <!-- 5個卡片 -->
        <div class="item"><card/></div>
        <div class="item"><card/></div>
        <div class="item"><card/></div>
        <div class="item"><card/></div>
        <div class="item"><card/></div>
    </div>
</template>
<style>
    .grid {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
    }
    .item {
        flex: 0 0 30%;
        margin: 16px;
    }
</style>

效果如下:
效果圖

可以看到最后一行只有 兩個Card 的時候，space-between 會造成中間一個大大的空白，想要把最后一個卡片放在空白的位置，應該怎樣設置 style 呢？

更新更新

<style>
    .grid {
        display: flex;
        flex-flow: wrap;
        /* 下面這一行不要了 */
        /* justify-content: space-between; */
    }
    .item {
        flex: 0 0 30%;
        /* margin 改成下面這樣就可以了 */
        margin-top: 24px;
        margin-left: calc((100% - 3 * 30%) / 4);
    }
</style>
回答
編輯回答
薄荷綠

為什么要用table寫呢？ 直接用柵格 分3分就好了 然后可以自己封裝個輪子 v-for就ok

2017年9月23日 05:54
編輯回答
氕氘氚

可用flex，ul>li實現(xiàn)。

ul{
    display:flex;
    display:-webkit-flex;
    flex-wrap:wrap;
}
li{
    width:30%;
}
2017年9月25日 14:33
編輯回答
乖乖瀦

如果不考慮兼容性的話，flex布局很好實現(xiàn)的。
1.一行對應三個card只要把容器的寬度定好，item的寬度定好，容器加上flex-wrap：wrap;不夠就會自動換行
2.最多顯示4行你控制請求的數(shù)據就好了啊

2018年7月8日 02:11
編輯回答
女流氓

用bootstrap的柵格布局就可以解決的，主要是樣式問題

2017年10月17日 05:44