小技巧

使用::after调整Flex布局

项目中使用Flex布局显示电影的搜索结果，代码如下：

<view class="search-container" wx:else>
  <block wx:for="{{searchData}}" wx:key="index">
    <movie class="movie" movie="{{item}}" />
  </block>
</view>

.search-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30rpx 28rpx;
}

当搜索结果只有两个的时候，space-between会产生下面的结果，显然不够美观

我们可以通过伪元素的方式添加一个空白内容撑满整行

.search-container::after {
  content: 'fef';
  width: 200rpx;
}

伪元素的宽度和单个movie相同，添加后就可以得到理想的效果了