简书链接:微信小程序gridviewflex布局居中对齐末尾空缺巧妙解决
文章字数：47,阅读全文大约需要1分钟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view class="item-container">
    <view class="item" wx:for="{{item}}" wx:key="id" id="{{item.id}}" data-index="{{index}}" catchtap='itemClick' data-model='{{item}}'>
        <view class="menu">
            <image class="menu-icon" src="{{item.icon_url}}" style="background-color:{{item.color}};"></image>
            <text class="menu-title">{{item.title}}</text>
        </view>
    </view>
    <block wx:if="{{ (item.length%3==1)}}">
        <view class="item"> </view>
    </block>
    <block wx:if="{{ (item.length%3==2)}}">
        <view class="item"> </view>
    </block>
</view>

这里的案例是3列， 如果空缺 1 或者2 就补上。否则会导致最后一排不是靠左边对齐就感觉很丑。