flex 的 space-between 属性多行等分布局出现空格的友好处理

[lulujianglab]

经常使用 flex 布局的小伙伴应该遇到过一个问题，就是当我们使用 space-between 属性等分布局时，在多行且不是整数时，中间就会空出一格，比如

我有一个宽度为 576 px , 有 6 个固定的 item宽为 130，如果等分布局，就会出现下面这种情况

这种情况应该怎么处理呢？我们可以通过手写一个函数来填充，比如每行有 num 个 item ，始终渲染 num 的整数个 item ，多出的用 null 填充

handleObj = (i) => (
    {id: i, hidden: true}
  )

// collection: 原数据list，是个数组 ; num: 每行需要展示的item数
handleShowContent = (collection, num) => { 
  const hiddenNum = Math.ceil(collection.length / num) * num - collection.length // 行数
  const newCollection = JSON.parse(JSON.stringify(collection))
  for (let i = 0; i < hiddenNum; i+=1) {
    newCollection.push(this.handleObj(collection[collection.length-1].id+i+1))
  }
  return newCollection
}

<div className={styles.list}>
  {
    (element || []).map(ele => (
      <div key={ele.id} className={`${styles.item} ${ele.hidden? styles.show : ''}`} />
    ))
  }
</div>

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px;
  height: 200px;
  background-color: #fff;
}

.show {
  visibility: hidden;
}

.item {
  border:1px solid #e5e5e5;
  width:130px;
  height:80px;
}

处理完之后就能得到正常的展示