flex布局，设置最后一个magin无效

使用flex做水平的滚动布局的时候，会发现，设置最后一个元素的margin是无效的。在父元素添加伪类 after，添加一个需要的margin占位就好了。记得要设置高度。

jsx文件

import Nerv from 'nervjs';
import { View, Text, Image } from "@tarojs/components";

import './index.scss';


const Recommend = ({ recommendList = [] }) => {

  return (
    <View className={'recommend_content ' + `${recommendList.length ? 'show' : 'hidden'}`}>
      {recommendList.map((item) => (
        <View className='recommend_single_box' key={item.packageId}>
          <View className='recommend_image'>
            <Image mode='aspectFill' src={item.cardCover}></Image>
          </View>
          <View className='recommend_info'>
            <View className='recommend_info_title'>{item.packageName}</View>
            <View>
              
            </View>
          </View>
        </View>
      ))}
    </View>
  )
}

export default Recommend

scss 文件

.recommend_content {
  &.show {
    visibility: block;
  }
  &.hidden {
    display: none;
  }
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  width: 100%;
  height: 280px;
  .recommend_single_box {
    min-width: 650px;
    height: 224px;
    background: #F8F8F8;
    border-radius: 18px;
    margin: 0px 10px;
    display: flex;
    align-items: center;
    &:first-child {
      margin-left: 20px;
    }
    &:last-child {
      margin-right: 0;
    }

    .recommend_image {
      width: 135px;
      height: 135px;
      background: #D0CFCF;
      border-radius: 5px;
      overflow: hidden;
    }
  }
  &::after {
    content: "";
    min-width: 30px;
    height: 10px;
  }
  &::-webkit-scrollbar {
    display: none;
  }
}