你无法靠逃避生活来获得真正的平静

起因

如何解决css flex布局一行3列等分，最右边距离不统一，最后一行排序...单这个标题就不应该是在前端连滚带爬几年的人提出来的可总是因为这小细节而烦恼，你说在灵沐 ，星宿UI上已经就有一列2列布局，那你写个一行3列，不过分吧！走马观花，看看一行3列常见的2大问题：
使用margin之后，右边边距总是偏大

使用space-around或space-between，最后一行排序出现问题

解决

有2个简单可靠的方式来解决，第一种在flex布局下，有3个子容器各占33.33%，在子容器里面写我们需要的内容，星宿UI，灵沐小程序金刚区都是采用这种方式 ；该方案也是最早问“焦大老”，只是多增加一个容器即决绝

<template>
  <view>
    <view class="flex-view">
      <view class="flex-item" v-for="item in 6">
        <!-- 重点 -->
        <view class="flex-centent"></view>
      </view>
    </view>
  </view>
</template>
<style>
  .flex-view {
    margin: 30rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item {
    width: 33.33%;  /* 重点 */
    flex-shrink: 0;
  }
  .flex-centent{
    background-color: #5e8d8d;
    height: 300rpx;
    border-radius: 16rpx;
    margin: 10rpx;
  }
</style>

另外一种在抖音刷到“渡一教育”的方式，flex配合margin自动分配剩余空间，使用到css的calc属性

计算公式

width: 宽度;  
margin: 上下边距 calc((100% - 宽度 * 列数) / 列数 / 2);

<template>
  <view>
    <view class="flex-view">
      <view class="flex-item" v-for="item in 6">
​
      </view>
    </view>
  </view>
</template>
<style>
  .flex-view {
    margin: 30rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item {
    width: 30%;  /* 重点 */
    margin: 10rpx calc((100% - 30% * 3) / 3 / 2);/* 重点 */
    flex-shrink: 0;
    background-color: #5e8d8d;
    height: 300rpx;
    border-radius: 16rpx;
  }
</style>