flex布局使space-between的样式符合要求的两种方法

有一种flex的布局比较常见，就是购物网站那种，每个商品是一个卡片，然后从左到右从上到下平铺方形的容器，每个商品卡片之间的间距相等的

也就是方型容器，里面的方型元素按照flex布局，自动铺满，四条边余内部的容器没有间距，中间是相等的间距

使用下面的样式是最接近需求的

display:flex
justify-content:space-between
flex-wrap:wrap

但是有一个问题是space-between的效果，间距并不是固定的。当你这一行元素不能铺满（每行元素大于2的时候会出现）的时候，这个间距就会变大，因为元素会往两边跑。不是我们想要的效果。

有两种方法

01. 当每行是三个元素的时候，用空的伪元素

高度为0，看不见的伪元素

这样当最后一行元素只有一个的时候，加上这个伪元素是两个，就能触发正确的布局。

0个和3个的时候因为伪元素是不可见的也没有高度，对布局不会有影响

.flex:after{
 content:''
 width:30%
 height:0
 visibility:hidden
}

02.补位法

只要我们在结尾继续补充宽高相同，但是visibility为hidden的元素，做到时刻都是铺满的效果就可以了。

在react里面，每行4个元素的情况下是这样的。

首先我写了一个生成数组的方法

/**
 * 生成n个相同元素的数组
 * @param element
 * @param n
 * @returns
 */
export const generateNElement = (element: any, n: number) => {
  let arr = []
  for (let i = 0; i < n; i++) {
    arr.push(element)
  }
  return arr
}

然后我们在渲染节点的末尾，渲染这几个不可见的元素

              {generateNElement(
                1,
                currentProductList.length % 4 === 0
                  ? 0
                  : 4 - (currentProductList.length % 4)
              ).map((item, index) => {
                return (
                  <div
                    className={style['product-card']}
                    key={index}
                    style={{
                      visibility: 'hidden',
                    }}
                  ></div>
                )
              })}