小程序space-between;最后一行不满一行的情况解决办法

不是想要的效果图：

屏幕快照 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的倍数margin-right样式

---

第二种办法解决

主要是对数据状态进行操作；
等差公式： an = a1 + (n - 1)*d;

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

HTML有点改变

<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"
        }
        ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    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、计算出每项的下一个等差为3的数
            console.log(an,'nnn')
            //2、给自己想要的添加
            if (an < nums.length) {//这里要控制an项大小大于数组的长度的话，否则溢出报错
                nums[an].styles = true;
                console.log(nums[an])
            }
        }
        console.log(nums,'nums')
        this.setData({
            nums
        })
    }
})

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

总结：其他一行放4个5个同样可以使用只需调整CSS文件中的基本控制样式即可