尝试灵活布局：探索有趣的flex特性

又开启了新的一周，按照惯例，这一周我要......

可惜现实确是伴随着熟悉的闹铃声，程序化的起床，穿衣，赶地铁。慢慢悠悠，看似卡着9点赶到公司，其实是这一年多次踩坑总结出的稳如老狗的时间表。

放下背包，坐上工位。只一眼就看见坐对面的产品对我露出了久违的笑容，不经感觉座椅下传来一丝凉意......

恍惚间，产品便已走到我的身后，拍了拍我的肩膀，轻声说道：“阿飞，线上项目需要加一个小功能...”

一听这个“小”字，我表面上不露声色，暗地里眉头一皱。

但老道的产品貌似通过我僵直的后背感受到了我的紧张，轻笑："真的，不骗你。"

而后短暂的交流中我意识到确实是个小功能，便轻靠在座位上，抿了一小口水，恢复了往日的神色。

逛了会儿论坛，喝两口咖啡，ui小姐姐便将ui图送到了我的手中。

正文开始

ui图如下

页面很简单，一个公众号的h5页面，功能是让用户添加需要关注的政策类别，如果发布了关注的新政策则通过公众号推送消息。

一看到ui图，心里顿感美滋滋，产品诚不欺我,这不是简简单单的事嘛。

出现问题

很快静态页面就完成了，然后就出现了下面这张图。

问题很明显，两端对齐后，最后一行若元素不满，便会出现上面这种情况，这哪行，以我的经验产品肯定不同意，要是拿过去肯定要来一波对线。

思路一

想了想，get到了两个思路，我是不是可以在最尾部通过伪元素添加一块空元素，所以我写了如下代码。

<view class="tab-list">
    <view v-for="item in mineTabList" :key="item.id" @tap="removeModal = true">
        <text>{{item.label}}</text>
        <u-icon 
          class="tab-remove" 
          size="30" 
          color="#ff3333" 
          name="minus-circle-fill"
         />
   </view>
</view>
<style lang="scss">
    .tab-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .tab-item{
            text-align: center;
            background-color: #edeef0;
            padding: 20rpx 50rpx;
            margin-bottom: 20rpx;
            border-radius: 8rpx;
            position: relative;
            text{
                font-size: 28rpx;
                color: #333333;
            }
            .tab-remove{
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .no-right-margin{
            margin-right: 0!important;
        }
    }
    .tab-list::after{
        content: '';
        width: 31%;
    }
</style>

效果如图。

看上去成功了， 但如果不是三列而是多列又该怎么办呢？

思路二

第二个想法是用左对齐，然后加边距。

然后，我又开始实践我的第二个想法，然后变成了这样。

所以，我要加边距了......

很明显还是有问题，元素并没有占满整行，继续改，看上去flex-basis这个属性可以帮我解决这个问题，加上去试试。

于是，我将行内项目的flex-basis置为31%后

看上去好了些，但因为我加上了外边距，导致每行最后一个元素和右边距离还是大了。

怎么办？干掉这个边距呗。这是一行三列，所以逢三去边距，就有了下面的代码。

<view class="tab-list">
    <view :class="['tab-item', {'no-right-margin': (index + 1) % 3 === 0} ]" 
      v-for="(item, index) in mineTabList" :key="item.id" @tap="removeModal = true">
          <text>{{item.label}}</text>
          <u-icon 
             class="tab-remove" 
             size="30" 
             color="#ff3333" 
             name="minus-circle-fill"/>
    </view>
</view>
<style lang="scss">
    .tab-list{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
             .tab-item{
                flex: 0 0 31%;
                text-align: center;
                background-color: #edeef0;
                padding: 20rpx 40rpx;
                margin-bottom: 20rpx;
                margin-right: 20rpx;
                border-radius: 8rpx;
                position: relative;
                text{
                    font-size: 28rpx;
                    color: #333333;
                }
                .tab-remove{
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }  
            .no-right-margin{
                margin-right: 0;
            }
        }
</style>

通过v-bind动态绑定css样式为需要的元素去除外边距，效果如下：

一行四列修改flex-basis属性和需要逢四去除边距的元素也可实现如下：

这是我最后采取的解决办法，或者有更好的方法解决，大家一起交流呀。