不是想要的效果圖：

屏幕快照 2018-12-08 下午12.10.09.png

最終效果圖：

屏幕快照 2018-12-08 下午12.08.05.png

解決辦法之一：
html

<view class='video-container'>
    <view class='video-item' wx:for="{{[{name: '鄰家'},{name: '鄰家'},{name: '鄰家'},{name: '鄰家'},{name: '鄰家'},{name: '鄰家'},{name: '鄰家'},{name: '鄰家'}]}}" wx:for-item="item" wx:key="idx" wx:for-index="idx">
        <view class='video-img'>
            <image src='/images/share.jpg'></image>
        </view>
        <view class='video-text'>{{item.name}}</view>
    </view>
</view>

css

.video-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.video-item{
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;
    margin-right: 2%;
}

.video-item:nth-child(3n){
    margin-right: 0;
}

.video-img{
    width: 100%;
    height: 200rpx;
    background-color: #ddd;
}

.video-img image{
    width: 100%;
    height: 100%;
}

.video-text{
    font-size: 26rpx;
    color: #333;
    margin-top: 20rpx;
}

:nth-child(3n) 去掉為3的倍數(shù)margin-right樣式

第二種辦法解決

主要是對數(shù)據(jù)狀態(tài)進(jìn)行操作；
等差公式： an = a1 + (n - 1)*d;

屏幕快照 2018-12-08 下午3.25.28.png

HTML有點(diǎn)改變

<view class='video-container'>
    <view wx:for="{{nums}}" wx:for-item="item" wx:key="idx" wx:for-index="idx" class='video-item {{item.styles? "mid-item" : ""}}'>
        <view class='video-img'>
            <image src='/images/share.jpg'></image>
        </view>
        <view class='video-text'>{{item.name}}</view>
    </view>
</view>

css:

.video-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.video-item{
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;
}

.mid-item{
    margin-left: 2%;
    margin-right: 2%;
}

.video-img{
    width: 100%;
    height: 200rpx;
    background-color: #ddd;
}

.video-img image{
    width: 100%;
    height: 100%;
}

.video-text{
    font-size: 26rpx;
    color: #333;
    margin-top: 20rpx;
}

js:

Page({
    data: {
        nums: [
        {
            name: '鄰家'
        }, 
        {
            name: '鄰家'
        }, 
        {
            name: '鄰家'
        },
        {
            name: "lily"
        },
        {
            name: "maomao"
        }
        ]
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function(options) {
        var {
            nums
        } = this.data;
        var a1 = 1;
        for (let i = 1; i < nums.length; i++) {
            let an = a1 + (i - 1) * 3;
            //1、計(jì)算出每項(xiàng)的下一個等差為3的數(shù)
            console.log(an,'nnn')
            //2、給自己想要的添加
            if (an < nums.length) {//這里要控制an項(xiàng)大小大于數(shù)組的長度的話，否則溢出報錯
                nums[an].styles = true;
                console.log(nums[an])
            }
        }
        console.log(nums,'nums')
        this.setData({
            nums
        })
    }
})

屏幕快照 2018-12-08 下午3.36.55.png

總結(jié)：其他一行放4個5個同樣可以使用只需調(diào)整CSS文件中的基本控制樣式即可

第三種辦法解決（grid布局）

效果圖1：

截屏2022-04-18 上午10.23.22.png

效果圖2：

截屏2022-04-18 上午10.23.38.png

效果圖3：

截屏2022-04-18 上午10.23.44.png

<div className={styles.box2}>
        <div className={styles.child}>1</div>
        <div className={styles.child}>2</div>
        <div className={styles.child}>3</div>
        <div className={styles.child}>4</div>
        <div className={styles.child}>5</div>
 </div>

// css
.box2 {
    display: grid;
    row-gap: 10px; // 中間模塊間隔
    column-gap: 10px; // 換行后，上下間隔
    // grid-template-columns: auto auto 150px 150px; // 每行的前面2個元素自適應(yīng)，后面的自定義樣式
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); // 所有的自適應(yīng)，最小150px, 最大為平局分(都為一等份)
    background-color: lightgreen;
    .child {
      height: 150px;
      background-color: red;
      display: grid;
      place-items: center;
      color: #fff;
    }
  }